Vue监视数据的原理：
1、vue会监视data中所有层次的数据
2、如何监测对象中的数据？
通过setter实现监视，并且要在new Vue()时就传入要监测的数据。
（1）对象中后追加的属性，Vue默认不做响应式处理
（2）如需给后添加的属性做响应式，请使用如下API：
Vue.set(target, propertyName/index, value)
或
Vue.$set(target, propertyName/index, value)
3、如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对象的方法对数组进行更新；
（2）重新解析模板，进而更新页面。
4、在Vue修改数组中的某个元素一定要用如下方法：
（1）使用这些API：push() pop() shift() unshift() splice() sort() reverse()
（2）Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>总结数据监测</title>
<script type="text/javascript" src="./vue.js"></script>
<script>Vue.config.productionTip=false </script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h1>学生信息</h1>
<button @click="student.age++">年龄+1岁</button><br />
<button @click="addSex">添加性别属性，默认值：男</button><br />
<button @click="addFriend">在列表首位添加一个朋友</button><br />
<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br />
<button @click="addHobby">添加一个爱好</button><br />
<button @click="updateHobby">修改一个爱好为：开车</button><br />
<button @click="removeSmoke">过滤掉爱好中的抽烟</button><br />
<h3>姓名：{{student.name}}</h3>
<h3>年龄：{{student.age}}</h3>
<h3 v-if="student.sex">性别：{{student.sex}}</h3>
<h3>爱好：</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h3>朋友们：</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
</body>
<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:36},
]
}
},
methods:{
addSex(){
vm.$set(this.student,'sex','男')
},
addFriend(){
this.student.friends.unshift({name:'jack',age:70})
},
updateFirstFriendName(){
/*
下面这种写法不合法：因为直接对student中的friends[0]表示一个对象，在Vue中没有对象的setter和getter方法，所以直接修改对象内容会出错’
this.student.friends[0] = {name:'ooo',age:23}
但下面这种写法合法，因为name是friends[0]中的一个属性，属性有setter和getter方法，可以通过下面方法修改name的值。
this.student.friends[0].name = '张三'
*/
this.student.friends[0].name = '张三'
},
addHobby(){
this.student.hobby.push('游泳')
},
updateHobby(){
/*
不能写成下面这种形式，因为不能对数组内容直接赋值，因为数组对象没有setter和getter值。
this.student.hobby[0] = '开车'
*/
this.student.hobby.splice(0,1,'开车')
//Vue.set(this.student.hobby,0,'开车')
//this.$set(this.student.hobby,0,'开车')
},
removeSmoke(){
//如果遇到过滤filter这种不改变原的数据的API时，可以通过更新数组来实现对数据的更新
this.student.hobby = this.student.hobby.filter((h) => {
return h !== '抽烟'
})
},
}
})
</script>
</html>
数据劫持
1、类比：生活中的劫持，就是我出门，然后被劫匪打劫要看我身上的钱财，类比Vue中的劫持就是如果要查看vm对象或者修改vm对象，就要通过setter或getter方法进行拦截，之后放行，也就知道了vm对象是否产生变化。
2、数据劫持内容：
我们可以发现vm._data中的结构与我们定义的data内容并不相同。
-------------------- 图：vm._data --------------------
data:{
student:{
name:'tom',
age:18,
hobby:['抽烟','喝酒','烫头'],
friends:[
{name:'jerry',age:35},
{name:'tony',age:36},
]
}
},
-------------------- 图：定义中的data --------------------
可以发现出现了get student和set student两个内容，可以监测到student的变化，从而得到vm是否变化的消息。
