Vue中改變對象的注意事項

數組更改注意事項

Vue無法檢測到以下方式變動的數組

• 當你利用索引直接設置一個項時，例如：vm.items[index] = newValue
• 當你修改數組的長度時，例如：vm.items.length = newLength
  針對問題一，解決方案有兩種：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
// 問題
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的
//  解決方案
Vue.set(vm.items, indexOfItem, newValue);//方案一
vm.$set(vm.items, indexOfItem, newValue);//等同於方案一
vm.items.splice(indexOfItem, 1, newValue);//方案二

對象更改注意事項

Vue無法檢測到對象屬性的添加和刪除。對於已經創建的實例，Vue 不能動態添加根級別的響應式屬性，可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。

Vue 不能動態添加根級別的響應式屬性：

var vm = new Vue({
  data: {
    a: 1
  }
})
vm.b = 2;// vm.a現在是響應式的，vm.b不是響應式的

向嵌套對象添加響應式屬性：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
// 問題
vm.userProfile.age = 27;// 非響應
// 解決方案
Vue.set(vm.userProfile, 'age', 27);// 方案一
vm.$set(vm.userProfile, 'age', 27);// 等同方案一
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
});// 方案二
//方案二是用兩個對象的屬性創建一個新的對象，注意不要使用以下方式，因為此種方式是與vm.userProfile.age = 27的本質是一樣的，均是非響應屬性。
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})