Vue之$set使用

背景

后端參與前端開發的小白，在開發過程中遇到了如下情況：當vue的data里邊聲明或者已經賦值過的對象或者數組（數組里邊的值是對象）時，向對象中添加新的屬性，如果更新此屬性的值，是不會更新視圖的。

官方文檔中是這樣描述的：如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。

解決方案

官方給出了如下解決方案：

Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上：

Vue.set(vm.obj, 'e', 0)

您還可以使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：

this.$set(this.obj,'e',02)

Vue不能檢測數組變動

例如下面兩種情況：

• 當你利用索引直接設置一個項時：vm.items[indexOfItem] = newValue
• 當你修改數組的長度時：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)