由於 Vue 會在初始化實例時進行雙向數據綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以
屬性必須在 data 對象上存在時才能進行上述過程 ，這樣才能讓它是響應的。如果要給對象添加新的屬性，此時新屬性沒有進行過上述過程，不是響應式的，所以會出想數據變化，頁面不變的情況。此時需要用到$set。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script> </head> <body> <div id="app"> 姓名：{{ name }}<br> 年齡：{{age}}<br> 性別：{{sex}}<br> 說明：{{info.content}} </div> <!-- JavaScript 代碼需要放在尾部（指定的HTML元素之后） --> <script> var data = { name: "簡書", age: '3', info: { content: 'my name is test' } } var key = 'content'; var vm = new Vue({ el:'#app', data: data, ready: function(){ //Vue.set(data,'sex', '男') //this.$set('info.'+key, 'what is this?'); } }); <!--如果直接新增sex屬性，就會出現下圖情況，所以頁面上{{sex}}是沒有數據的-->
data.sex = '男'； </script> </body>
在age及name都有get和set方法,但是在sex里面並沒有這兩個方法，因此，設置了sex值后vue並不會自動更新視圖；
數組與對象都會有以上問題解決方法：vue 的$set方法
1、數組
this.$set(Array, index, newValue) <-- 由於 JavaScript 的限制，Vue 不能檢測以下變動的數組： 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue 解決：用$set方法 當你修改數組的長度時，例如：vm.items.length = newLength 解決：vm.items.splice(newLength) -->
2、對象
this.$set(Object, key, value) <-- 有時你想向已有對象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。 但是，添加到對象上的新屬性不會觸發更新。 在這種情況下可以創建一個新的對象，讓它包含原對象的屬性和新的屬性： this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 或者上面的$set方法 -->
轉自鏈接：https://www.jianshu.com/p/70b2e2e0aa11