沃梦达 / IT编程 / 前端开发 / 正文

vue中哪些数组方法不是响应式的

何为数组的响应式通过方法把数组中的元素改变了,页面上的视图也会更新。响应式的方法div id=appdiv v-for=item in letters{{item}}/divbutton @click=btnClick按钮/button/divscript src=.....

何为数组的响应式

通过方法把数组中的元素改变了,页面上的视图也会更新。

响应式的方法
div id="app">
    <div v-for="item in letters">{{item}}</div>
    <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['1','2','3','4']
        },
        methods: {
            btnClick() {
          // 1.push方法:在数组最后面添加元素
          // this.letters.push('aaa')
          
          // 2.pop方法:删除数组中最后一个元素
          
          // 3.shift方法:删除数组中第一个元素
           
          // 4.unshift方法:在数组最前面添加元素
           
         // 5.splice方法:删除元素、插入元素、替换元素

         // 6.sort方法:排序

         // 7.reverse方法:反转

            }
        }
    })
</script>

总结:一共七个数组方法支持在vue中响应式

非响应式方法
data() {
	nums: [1,2,3,4]
}
methods: {
	changeNum() {
	this.nums[2]= 99
	}
}

此类获取数组索引进行一个操作不是响应式的。

怎么解决:
1、通过splice方法

this.nums.splice(1,1,'99')

2、也可以通过vue的set方法进行修改。
set(要修改的对象,索引值,修改后的值)

Vue.set(this.nums,1,'99')
遇到数组对象可如何是好

修改对象的属性值是响应式的

data() {
	nums: [{name: "fanfusuzi",sex:"man"},{name:"zhangsan",sex: "man"}]
}
methods: {
	changeName() {
	 this.nums[0].name ="zkf"
	}
}

通过下标替换一个对象元素,不是响应式的

data() {
	nums: [{name: "fanfusuzi",sex:"man"},{name:"zhangsan",sex: "man"}]
}
methods: {
	changeName() {
	 this.nums[0] = {name: "zkf",sex:"man"}
	}
}

本文标题为:vue中哪些数组方法不是响应式的