什么情況下使用$set吭从？
由于 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屬性，就會出現下圖情況-->
data.sex = '男'歌径；
</script>
</body>
在age及name都有get和set方法,但是在sex里面并沒有這兩個方法毁嗦，因此，設置了sex值后vue并不會自動更新視圖沮脖；
image
解決辦法
數組：
this.$set(Array, index, newValue)
由于 JavaScript 的限制金矛，Vue 不能檢測以下變動的數組：
當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
解決：用$set方法
當你修改數組的長度時勺届，例如：vm.items.length = newLength
解決：vm.items.splice(newLength)
對象：
this.$set(Object, key, value)
有時你想向已有對象上添加一些屬性驶俊，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。
但是免姿，添加到對象上的新屬性不會觸發(fā)更新饼酿。
在這種情況下可以創(chuàng)建一個新的對象，讓它包含原對象的屬性和新的屬性：
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
