Vue.set 向響應式對象中添加響應式屬性，及設置數組元素觸發視圖更新

1、爲何須要使用Vue.set？

　　vue中不能檢測到數組和對象的兩種變化：

　　一、數組長度的變化 vm.arr.length = 4

　　二、數組經過索引值修改內容 vm.arr[1] = ‘aa’

　　Vue.$set(target,key,value)：能夠動態的給數組、對象添加和修改數據，並更新視圖中數據的顯示。

　　vue在構造函數new Vue()時，就經過Object.defineProperty中的getter和setter 這兩個方法，完成了對數據的綁定。因此直接經過vm.arr[1] = ‘aa’的方法，沒法修改值去觸發vue中視圖的更新，必須還得經過Object.defineProperty的方法去改變，而Vue.$set（）就封裝了js底層的Object.defineProperty方法。

　　因此咱們須要利用Vue.set() 響應式新增與修改數據。

2、Vue.set使用

　　Vue不能檢測到對象屬性的添加或刪除。

　　因爲Vue會在初始化實例時對屬性執行getter/setter轉化過程，因此屬性必須在data對象上存在才能讓Vue轉換它，這樣才能是響應式的。例如：

data () { return { form: { total: 10 } } } // this.form.total是響應式的 // 若直接增長屬性，是非響應式的 this.form.showFlag= true //非響應式的

　　使用Vue.set(object, key, value)方法將響應屬性添加到嵌套的對象上。Vue.set(this.form, 'showFlag', true)

　　還可使用vm.$set實例方法，這也是全局Vue.set方法的別名：this.$set(this.form, 'showFlag', true)

　　這樣，this.form.showFlag 就是響應式的了。

　　Vue.set(target, key/index, value) 向響應式對象中添加一個屬性，並確保這個新屬性一樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新屬性，由於 Vue 沒法探測普通的新增屬性 (好比 this.obj.newProperty = 'hi')

　　官方文檔：https://cn.vuejs.org/v2/api/#Vue-set

Vue.set( target, propertyName/index, value )

• 參數：

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

• 返回值：設置的值。

• 用法：

  向響應式對象中添加一個屬性，並確保這個新屬性一樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新屬性，由於 Vue 沒法探測普通的新增屬性 (好比 this.myObject.newProperty = 'hi')

  注意對象不能是 Vue 實例，或者 Vue 實例的根數據對象。意思是，set 這個方法只能用於data 裏面的子數組對象，而不能直接用於data (這個根數據)或者vue 實例

var vm = new Vue({ el:"#div", data: { items: ['a', 'b', 'c'] } }); Vue.set(vm.items,2,"ling")

　　設置數組元素：Vue.set(vm.items, 2, "ling") 表示把 vm.items  這個數組的下標爲2 的元素，改成"ling"，把數組  ["a","b","c"] 修改後是 ["a","b","ling"]