數據檢測特別說名 · 慧鼎vue快速開發

## [數組更新檢測](https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B "數組更新檢測") ### [變異方法 (mutation method)](https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method "變異方法 (mutation method)") Vue 將被偵聽的數組的變異方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括： * `push()` * `pop()` * `shift()` * `unshift()` * `splice()` * `sort()` * `reverse()` 你可以打開控制臺，然后對前面例子的`items`數組嘗試調用變異方法。比如`example1.items.push({ message: 'Baz' })`。 ### [替換數組](https://cn.vuejs.org/v2/guide/list.html#%E6%9B%BF%E6%8D%A2%E6%95%B0%E7%BB%84 "替換數組") 變異方法，顧名思義，會改變調用了這些方法的原始數組。相比之下，也有非變異 (non-mutating method) 方法，例如`filter()`、`concat()`和`slice()`。它們不會改變原始數組，而**總是返回一個新數組**。當使用非變異方法時，可以用新數組替換舊數組： ~~~ example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) ~~~ 你可能認為這將導致 Vue 丟棄現有 DOM 并重新渲染整個列表。幸運的是，事實并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的啟發式方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。 ### [注意事項](https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 "注意事項") 由于 JavaScript 的限制，Vue**不能**檢測以下數組的變動： 1. 當你利用索引直接設置一個數組項時，例如：`vm.items[indexOfItem] = newValue` 2. 當你修改數組的長度時，例如：`vm.items.length = newLength` 舉個例子： ~~~ var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的 vm.items.length = 2 // 不是響應性的 ~~~ 為了解決第一類問題，以下兩種方式都可以實現和`vm.items[indexOfItem] = newValue`相同的效果，同時也將在響應式系統內觸發狀態更新： ~~~ // Vue.set Vue.set(vm.items, indexOfItem, newValue) ~~~ ~~~ // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) ~~~ 你也可以使用[`vm.$set`](https://cn.vuejs.org/v2/api/#vm-set)實例方法，該方法是全局方法`Vue.set`的一個別名： ~~~ vm.$set(vm.items, indexOfItem, newValue) ~~~ 為了解決第二類問題，你可以使用`splice`： ~~~ vm.items.splice(newLength) ~~~ ## [對象變更檢測注意事項](https://cn.vuejs.org/v2/guide/list.html#%E5%AF%B9%E8%B1%A1%E5%8F%98%E6%9B%B4%E6%A3%80%E6%B5%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 "對象變更檢測注意事項") 還是由于 JavaScript 的限制，**Vue 不能檢測對象屬性的添加或刪除**： ~~~ var vm = new Vue({ data: { a: 1 } }) // `vm.a` 現在是響應式的 vm.b = 2 // `vm.b` 不是響應式的 ~~~ 對于已經創建的實例，Vue 不允許動態添加根級別的響應式屬性。但是，可以使用`Vue.set(object, propertyName, value)`方法向嵌套對象添加響應式屬性。例如，對于： ~~~ var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) ~~~ 你可以添加一個新的`age`屬性到嵌套的`userProfile`對象： ~~~ Vue.set(vm.userProfile, 'age', 27) ~~~ 你還可以使用`vm.$set`實例方法，它只是全局`Vue.set`的別名： ~~~ vm.$set(vm.userProfile, 'age', 27) ~~~ 有時你可能需要為已有對象賦值多個新屬性，比如使用`Object.assign()`或`_.extend()`。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣： ~~~ Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) ~~~ 你應該這樣做： ~~~ vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) ~~~