Vue监视数据的原理:
1. vue 会监视 data 中所有层次的数据
2.如何监测对象中的数据？
通过 setter 实现监视，且要在 new Vue 时就传入要监测的数据 (1)对象中后追加的属性，Vue默认不做响应式处理 (2)如需给后添加的属性做响应式，使用如下API: Vue.set(target, propertyName/index, value) 或 vm. $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(vm._data) 的根数据对象添加属性!
<body>
<div id="root">
<button @click="student.age++">年纪+1</button>
<button @click="addSex">添加性别属性</button>
<button @click="student.sex= '未知' ">修改性别</button>
<button @click="addFri">首位加朋友</button>
<button @click="updateFFName">修改首位朋友姓名为张三</button>
<button @click="updateFHobby">修改首个爱好为绘画</button>
<button @click="removeHSmoke">过滤掉爱好追剧</button>
<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>
const vm = new Vue({
el:'#root',
data:{
student:{
name:'Tom',
age:18,
hobby:['追剧','跳舞','唱歌'],
friends:[
{name:'Nancy',age:'45'},
{name:'Tony',age:'55'}
]
}
},
methods:{
addSex(){
// Vue.set(this.student, 'sex', '男')
// 或：
this.$set(this.student,'sex','男')
},
addFri(){
this.student.friends.unshift({name:'Jack',age:'15'})
},
updateFFName(){
this.student.friends[0].name = '张三' // 不能直接用索引赋值修改数组元素，只能通过元素的属性修改属性值，否则不是响应式
},
updateFHobby(){
// this.student.hobby.splice(0,1,'绘画')
// 或：
this.$set(this.student.hobby,0,'绘画') // set可以添加属性 也可以修改相应索引的值
},
removeHSmoke(){
this.student.hobby = this.student.hobby.filter((h)=>{ // 所以不是由Vue控制的回调用箭头函数
return h !== '追剧'
}) // filter替换原数组
}
}
})
</script>
