vue中數組變動更新檢測

Vue 包含兩種觀察數組的方法分別如下

　1.變異方法

　　顧名思義，變異方法會改變被這些方法調用的原始數組，它們也將會觸發視圖更新，這些方法如下

　　　　push()

　　　　pop()

　　　　shift()

　　　　unshift()

　　　　splice()

　　　　sort()

　　　　reverse()

　　　使用舉例：example1.items.push({ message: 'Baz' }) 

　2.非變異方法

　　非變異方法與變異方法的區別就是，非變異方法不會改變原始數組，總是返回一個新數組，

　　當使用非變異方法時，可以用新數組替換舊數組，非變異方法大致有：filter(), concat() 和 slice()

　　使用舉例：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

 

由於 JavaScript 的限制，Vue 不能檢測以下變動的數組：

　1.當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue

　2.當你修改數組的長度時，例如：vm.items.length = newLength

vue針對這兩個問題給出了相應的解決辦法,使用這兩種方法，也會觸發狀態更新

　1.使用vue全局方法Vue.set() 或者使用vm.$set() 實例方法

　2.使用 splice，caoncat等修改數組

 

Vue.set用法如下（vm.$set方法是Vue.set的別名，與其用法一致）

　　

總的來說：vue能不能檢測到數組的變化並更新，取決於原生js的數組方法，

　　　　　如果原生js方法（vue變異方法）能夠修改原數組，那么vue就可以檢測到變化並更新（例如push等方法）

　　　　　如果原生js方法（vue非變異方法）不能夠修改原數組，而是返回一個新數組，那么vue也可以檢測到變化並更新，

　　　　　　　　前提是使用這些方法時要把新數組返回出來去替換掉舊數組

　　　　　至於原生js的數組的兩個坑，我們一定到注意，直接利用vue提供的方法來解決