物件變更檢測注意事項

物件變更檢測注意事項

還是由於 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);

如果你想給一個 data 中的物件新加屬性又不想使用到以上方法

建議使用一個變數接收新增完新屬性的物件，然後在從新賦值給原 data 中的資料

const userProfile = vm.userProfile;
userProfile.age = 27;
vm.userProfile = userProfile;
 

有時你可能需要為已有物件賦值多個新屬性，比如使用 Object.assign() 或 jQuery.extend()。在這種情況下，你應該用兩個物件的屬性建立一個新的物件。所以，如果你想新增新的響應式屬性，不要像這樣：

Object.assign(vm.userProfile, {
 //不要僅僅直接新增屬性的方式
 age: 27,
 favoriteColor: "Vue Green",
});

你應該這樣做：

vm.userProfile = Object.assign({}, vm.userProfile, {
 //建議新建一個物件合併和後在重新賦值
 age: 27,
 favoriteColor: "Vue Green",
});
 

Object.assign() 方法

Object.assign方法用於物件的合併，將源物件（source）的所有可列舉屬性，複製到目標物件（target）

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target; // {a:1, b:2, c:3}

陣列更新檢測

陣列更新檢測

變異方法 (mutation method)

Vue 將被偵聽的陣列的變異方法進行了包裹，所以它們也將會觸發檢視更新。這些被包裹過的方法包括：

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

你可以開啟控制檯，然後對前面例子的 items 陣列嘗試呼叫變異方法。比如 example1.items.push({ message: 'Baz' })。

替換陣列

變異方法，顧名思義，會改變呼叫了這些方法的原始陣列。相比之下，也有非變異 (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

舉個例子：

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 例項方法，該方法是全域性方法 Vue.set 的一個別名：

vm.$set(vm.items, indexOfItem, newValue)

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

vm.items.splice(newLength)

建議如果需要替換陣列中某一項統一使用 splice 方法