1. 程式人生 > >vue.js中$set與陣列更新

vue.js中$set與陣列更新

由於 JavaScript 的限制,Vue 不能檢測以下變動的陣列:
當利用索引直接設定陣列的某一項時,例如:vm.items[indexOfItem] = newValue
當你修改陣列的長度時,例如:vm.items.length = newLength,不會更新陣列。
當然vue中給瞭解決方法,就是使用 Vue.set, vm.$set(Vue.set的變種寫法)或者 splice,caoncat等修改陣列,同時也將觸發狀態更新:
ex:
這裡寫圖片描述

所以如果在例項建立後新增新的屬性到例項上,則不會觸發更新。

ps:現在有兩個陣列,分別為arr1,arr2,如果arr1以下標賦值改變陣列,arr2以$set改變陣列,結果是什麼樣呢?

data:{
    arr1 = ['a','b','c'];
    arr2 = [‘foo’,'bar','baz'];      
}

vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');

根據開始我們說的根據下標索引改變陣列不能觸發狀態更新,我們會知道:第一個陣列的第二項改變不會在頁面更新,只有第二個陣列的更改會在頁面更新。然而結果卻是:

   arr1 = ['a', 'alpha', 'b', 'c'];
   arr2 = [‘foo’, 'alpha', 'bar','baz'];    

兩個陣列的值都更新了,也就是說,arr2用$set()方法更新時,頁面會全部更新一遍。