一、先来看一个问题
添加一个按钮点击更新马冬梅的信息：
<button @click="gengxin">点击更新马冬梅的信息</button>methods:{
gengxin(){
this.person[1].name='马老师',
this.person[1].age=50,
this.person[1].sex='男'
}
}下面这种方式就不能奏效，但是在控制台查看person[1]姓名年龄啥的都是更改之后的。如果先点击按钮在点击vue后台可以看到信息更改页面却不更改，先点击vue后台就vue也没改页面也没改，这是为啥呢？
this.person[1]={id:'002',name:'马老师',age:'50',sex:'男'}二、Vue监视对象改变的原理
我们写的data是要传入的数据，传入到vm._data，这两个其实不是一摸一样的，打开控制台可以看到vm._data里面还有一堆东西，就是因为data在传入给vm._data之前，还要进行一些处理。
加工一下就能做响应式了（数据变了页面也跟着变），vm._data里面还有name.get/address.get和name.set等等函数
我们用原生js写也可以大概模拟一下name和address的getter和setter但是vue做的事情要更多，比如直接输入vue.name就可以查看，js还要vue._data.name
而且如果data里面数据套娃的话vue是自动递归嵌套有getter和setter的，js就没有了，vue连嵌套的数组也能给你挖出来配套getter和setter。
三、Vue监测对象中的数据
1.Vue.set()
实现后添加的数据也能有响应式的功能调用Vue给的API：
Vue.set(vm.student,'sex','男')；
vm.$set(vm.student,'sex','男');
实现点击按钮添加性别
<div id="root">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<hr/>
<button @click="addSex">点我添加性别</button>
<h2>学生姓名：{{student.name}}</h2>
<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
<!-- 判断一下有没有性别，有就展示没有就隐藏 -->
<h2>学生真实年龄：{{student.age.rAge}},对外年龄：{{student.age.lAge}}</h2>
<h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</h2>
</div>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
name:'尚硅谷',
address:'北京',
student:{
name:'tom',
age:{
rAge:40,
lAge:18
},
friends:[
{name:'jerry',age:35}
]
}
},
methods: {
addSex(){
Vue.set(this.student,'sex','男')
}
},
})set的局限性：最开始我们在student里面没有加sex但是盒子上面引用了没有报错，是因为a.b,只要data里有a就不会报错，如果我们再想添加一个校长是不可以给data里面追加属性的，第一个参数不可以是data或者vm。
四、Vue监测数组中的数据
数组中的数据不能靠setter和getter取得和改变数据，在Vue修改数组中的某个元素实现响应式的方法：
1.使用这些API:
push：在最后一个位置添加元素
pop：删除最后一个元素
shift：删除第一个
unshift：往前边加一个
splice：在指定位置插入一个元素
sort：分类
reverse：反转这个数组
filter不算，因为它都不能改变原数组，可以筛选完之后再赋值到之前的数组
所以我们就知道一当中的问题是为什么了，我们对数组的索引值直接去赋值肯定不行
vue当中的数组调用push方法和原始的数组调用push不一样，它是先像原始数组那样调，然后去重新解析模版，生成虚拟dom等等
2.Vue.set() 或 vm.$set()
Vue.set(vm.student.hobby,1,'跳舞')五、综合大练习
<div id="root">
<hr/>
<h1>学生信息</h1>
<button @click="student.age++">年龄+1</button>
<button @click="addSex">添加性别属性，默认值为男</button>
<button @click="addFriend">在列表首页添加一个朋友</button>
<button @click="xiugai">修改第一个朋友的名字为张三</button>
<button @click="addHobby">添加一个爱好</button>
<button @click="xiugaiaihao">修改第一个爱好为开车</button>
<h2>学生姓名：{{student.name}}</h2>
<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
<h2>学生真实年龄：{{student.age}}</h2>
<h2>
<ul>朋友
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
<ul>爱好
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
</h2>
</div>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
student:{
name:'tom',
age:18,
hobby:['抽烟','喝酒','打麻将'],
friends:[
{name:'jerry',age:35},
{name:'tony',age:40}
]
}
},
methods: {
addSex(){
Vue.set(this.student,'sex','男')
},
addFriend(){
this.student.friends.unshift({name:'tt',age:18})
},
xiugai(){
//this.student.friends[0].name.splice(0,1,'张三')
this.student.friends[0].name='张三'
},
addHobby(){
this.student.hobby.unshift('唱歌')
},
xiugaiaihao(){
this.student.hobby.splice(0,1,'开车')
}
},
})
</script>我做的时候修改第一个朋友的名字为张三的出了点问题，我光记着不能直接赋值了，但是像这种给数组下的某一个去赋值是可以的，不可以的是不能数组那一条直接赋值frined[0]={，，}这种
说的是0这一项的setter 和getter没有，0本身是对象，下面的name是一个属性，有属性就有setter 和getter。
不能通过数组的索引值直接赋值！！！
