vue中改變數組或對象，頁面沒作出對應的渲染

原文連接

數組更新檢測

變異方法

Vue 包含一組觀察數組的變異方法，因此它們也將會觸發視圖更新。這些方法以下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

你打開控制檯，而後用前面例子的 items 數組調用變異方法：example1.items.push({ message: 'Baz' }) 。

替換數組

變異方法 (mutation method)，顧名思義，會改變被這些方法調用的原始數組。相比之下，也有非變異 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。這些不會改變原始數組，但老是返回一個新數組。當使用非變異方法時，能夠用新數組替換舊數組：

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

注意事項你可能認爲這將致使 Vue 丟棄現有 DOM 並從新渲染整個列表。幸運的是，事實並不是如此。Vue 爲了使得 DOM 元素獲得最大範圍的重用而實現了一些智能的、啓發式的方法，因此用一個含有相同元素的數組去替換原來的數組是很是高效的操做。

因爲 JavaScript 的限制，Vue 不能檢測如下變更的數組：

1. 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

爲了解決第一類問題，如下兩種方式均可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：

// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)

爲了解決第二類問題，你可使用 splice：

 

example1.items.splice(newLength)

 

對象更改檢測注意事項

仍是因爲 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：

var vm = new Vue({ 　　data: { 　　　　a: 1 　　} }) // `vm.a` 如今是響應式的 vm.b = 2 // `vm.b` 不是響應式的

對於已經建立的實例，Vue 不能動態添加根級別的響應式屬性。可是，可使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。例如，對於：

var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) 

你能夠添加一個新的 age 屬性到嵌套的 userProfile 對象：

Vue.set(vm.userProfile, 'age', 27)

你還可使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：你能夠添加一個新的 age 屬性到嵌套的 userProfile 對象：

this.$set(this.userProfile, 'age', 27)

有時你可能須要爲已有對象賦予多個新屬性，好比使用 Object.assign() 或 _.extend()。在這種狀況下，你應該用兩個對象的屬性建立一個新的對象。因此，若是你想添加新的響應式屬性，不要像這樣：

Object.assign(this.userProfile, { age: 27, favoriteColor: 'Vue Green' })

你應該這樣作：

this.userProfile = Object.assign({}, this.userProfile, { age: 27, favoriteColor: 'Vue Green' })