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

　　這個屬性時深度監聽

 　　　　數組可以監聽新增減少，監聽不到值的改變。這個深度監聽對數組沒有影響。

　　　　對象可以監聽屬性值改變，監聽不到新增屬性。主要是對對象的深度監聽