Vue管理数据里的对象里面的每一个属性，都会采用Object.defineProperty去封装，实现响应式（所谓响应式，指的是，数据发生变化后，页面自动更新。）
但是给对象后添加的数据不会采用Object.defineProperty去封装，所以，就失去了响应式。
深度响应式就是用于解决这个问题的
//页面
<div id="app">
<div>
姓名：<input type="text" v-model="name">{{name}}
</div>
<div>
学生信息：
<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>
数组：{{arr}}
<button @click="addArr">添加数据</button>
<button @click="delArr">删除数据</button>
</div>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el:'#app',
data:{
//基本类型数据
name:'张三',
//对象类型数据
obj:{
name:'张三',
age:20,
},
arr:[11,22,33,44,55]
},
methods: {
//添加性别
// vue通过$set方法，给对象添加响应式属性
this.$set(this.obj,'sex','男')
},
//删除年龄
delAge(){
// vue通过$delete方法，删除对象的属性，并触发响应式
this.$delete(this.obj,'age')
},
//添加数组的数据
addArr(){
// 在vue中，操作数组，并触发页面更新只能使用数组的以下方法：
// push,pop,unshift,shift,splice,reseolve,sort
// this.arr.push(66)
// 如果想通过下标操作数组，也必须要使用$set和$delete方法
this.$set(this.arr,5,66)
},
delArr(){
// this.arr.splice(2,1)
this.$delete(this.arr,2)
}
},
})
</script>
