Vue管理數(shù)據(jù)里的對(duì)象里面的每一個(gè)屬性廷支，都會(huì)采用Object.defineProperty去封裝频鉴，實(shí)現(xiàn)響應(yīng)式（所謂響應(yīng)式，指的是恋拍，數(shù)據(jù)發(fā)生變化后垛孔，頁(yè)面自動(dòng)更新。）
但是給對(duì)象后添加的數(shù)據(jù)不會(huì)采用Object.defineProperty去封裝施敢，所以周荐，就失去了響應(yīng)式。
深度響應(yīng)式就是用于解決這個(gè)問(wèn)題的
//頁(yè)面
<div id="app">
<div>
姓名：<input type="text" v-model="name">{{name}}
</div>
<div>
學(xué)生信息：
<input type="text" v-model="obj.name">
<input type="text" v-model.number="obj.age">
<button @click="addSex">添加性別</button>
<button @click="delAge">刪除年齡</button>
<br>
{{obj}}
</div>
<div>
數(shù)組：{{arr}}
<button @click="addArr">添加數(shù)據(jù)</button>
<button @click="delArr">刪除數(shù)據(jù)</button>
</div>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el:'#app',
data:{
//基本類(lèi)型數(shù)據(jù)
name:'張三',
//對(duì)象類(lèi)型數(shù)據(jù)
obj:{
name:'張三',
age:20,
},
arr:[11,22,33,44,55]
},
methods: {
//添加性別
// vue通過(guò)$set方法僵娃，給對(duì)象添加響應(yīng)式屬性
this.$set(this.obj,'sex','男')
},
//刪除年齡
delAge(){
// vue通過(guò)$delete方法概作，刪除對(duì)象的屬性，并觸發(fā)響應(yīng)式
this.$delete(this.obj,'age')
},
//添加數(shù)組的數(shù)據(jù)
addArr(){
// 在vue中默怨，操作數(shù)組讯榕，并觸發(fā)頁(yè)面更新只能使用數(shù)組的以下方法：
// push,pop,unshift,shift,splice,reseolve,sort
// this.arr.push(66)
// 如果想通過(guò)下標(biāo)操作數(shù)組，也必須要使用$set和$delete方法
this.$set(this.arr,5,66)
},
delArr(){
// this.arr.splice(2,1)
this.$delete(this.arr,2)
}
},
})
</script>
