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
    }
}

　　这个属性时深度监听

　　　　数组可以监听新增减少，监听不到值的改变。这个深度监听对数组没有影响。

　　　　对象可以监听属性值改变，监听不到新增属性。主要是对对象的深度监听

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

相关推荐