注意：在vm(data)的根数据，不能使用 Vm.set() /vm.$set()
一、监视
1、vue会监视data中所有层次的数据、
2、对象数据
a、对象中添加属性，vue默认不做响应
b、对象添加属性，vue做响应，通过如下api
Vue.set(target, 属性, 值)
vue.$set(target, 属性, 值)3、数组数据
a、使用api
push() //最后一个添加
pop() // 删除最后一个
unshift() // 添加第一个
shift() //删除第一个
sort() // 排序
reverse() // 反转
splice(索引, 数量, 新值) // 替换b、使用vue.set()
Vue.set(target, 索引, 值)
vue.$set(target, 索引, 值)4、总结
对象响应：添加属性使用Vue.set()api，修改属性可以直接修改
数组响应：添加修改都要使用 api
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据响应式</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="container">
<button @click="student.age++">年龄+1岁</button> <br>
<button @click="addSex">添加性别属性，为男</button> <br>
<button @click="changeSex">修改性别</button> <br>
<button @click="addFriend">在列表首位添加一个朋友</button> <br>
<button @click="changeName">修改第一个朋友的名字为：张三</button> <br>
<button @click="addHobby">添加一个爱好</button> <br>
<button @click="changeHobby">修改第一个爱好为：开车</button> <br>
<button @click="filterSmoke">过滤爱好中的抽烟</button>
<h2>姓名：{{student.name}}</h2>
<h2>年龄：{{student.age}}</h2>
<h2 v-show="student.sex">性别：{{student.sex}}</h2>
<h2>爱好</h2>
<ul>
<li v-for="h in student.hobby">
{{h}}
</li>
</ul>
<h2>朋友们</h2>
<ul>
<li v-for="f in student.friends">
{{f.name}}---{{f.age}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#container",
data:{
student:{
name: 'jojo',
age:40,
hobby: ['吸烟', '喝酒', '烫头'],
friends :[
{name: 'jack', age:30},
{name:'tom', age:35}
]
}
},
methods: {
addSex(){
Vue.set(this.student, 'sex', '男')
vue.$set(this.student, 'sex', '男')
this.$set(this.student, 'sex', '男')
},
changeSex(){
this.student.sex = '女'
},
addFriend(){
this.student.friends.unshift({name: 'rose', age:20})
},
changeName(){
this.student.friends[0].name = '张三'
},
addHobby(){
// this.student.hobby.push('学习')
this.$set(this.student.hobby, this.student.hobby.length, '学习')
},
changeHobby(){
this.student.hobby.splice(0,1,'开车')
},
filterSmoke(){
this.student.hobby = this.student.hobby.filter((h) => {
return h !== '吸烟'
})
}
},
})
</script>
</body>
</html>
