vue数组变化视图_vue 在使用数组的时候，数组内部数据发生变化，视图却没有改变...

data(){return{

todos: [

{name:'aa', age: 22},

{name:'bb', age: 23}

]

}

}

methods:{

changeTodos(){this.todos[0]={name: 'zz', age: 12}

}

}

上面我们在改变todos中的数据的时候，页面则没有改变，我们可以使用下面的方法来解决这个问题

1.使用全局set方法

this.$set(this.todos, 0, {name: 'zz', age: 12})

或

this.$set(this.todos[0], 'name', 'zz')

2.强制更新

this.$forceUpdate()

如果我们不想利用$set去设置，可以利用$forceUpdate,因为修改了数据但是页面层没有变动，说明数据本身被修改了，只是vue没有监听到而已，用$forceUpdate就相当于按照最新数据给渲染一下

changeTodos(){

this.todos[0]={name: 'zz', age: 12}

this.$forceUpdate();

}

监听vue中数组的变化，

如果只是监听数组列表项的增减即数组长度的改变，直接对数组进行监听就好了

watch:{

data(newVal, oldVal) {

// do

}

}

如果是要对数组列表项的内容是否发生改变做监听，则需要加上一个deep: true属性

watch: {

data: {

handler(newVal, oldVal) {//do

},

deep:true}

}

这个属性时深度监听，可以监听到对象，数组的内容变化