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)