2.16、添加响应式数据
2.16.1. 什么是响应式？
修改data后，页面自动改变/刷新。这就是响应式。就像我们在使用excel的时候，修改一个单元格中的数据，其它单元格的数据会联动更新，这也是响应式。
2.16.2. Vue的响应式是如何实现的？
数据劫持：Vue底层使用了Object.defineProperty，将data中的数据放到了_data中，在_data中配置了setter方法，当去修改属性值时，setter方法则被自动调用，setter方法中不仅修改了属性值，而且还做了其他的事情，例如：重新渲染页面。setter方法就像半路劫持一样，所以称为数据劫持。
2.16.3. Vue会给data中所有的属性，以及属性中的属性，都会添加响应式。
2.16.4. 后期添加的属性，不会有响应式，怎么处理？
① Vue.set(目标对象, ‘属性名’, 值)
② vm.$set(目标对象, ‘属性名’, 值)
<body>
<div id="app">
<h1>{{msg}}</h1>
<div>姓名：{{name}}</div>
<div>年龄：{{age}}岁</div>
<div>数字：{{a.b.c.e}}</div>
<div>邮箱：{{a.email}}</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "响应式与数据劫持",
name: "jackson",
age: 20,
a: {
b: {
c: {
e: 1,
},
},
},
},
});
// 1、测试：后期给Vue实例动态的追加的一些属性，会添加响应式处理吗？
//vm.$data.a.email = 'jack@126.com'
// 通过这种直接方式后期给vm追加的属性并没有添加响应式处理。
//2、 如果你想给后期追加的属性添加响应式处理的话，调用以下两个方法都可以：
// Vue.set() 、 vm.$set()
//Vue.set(目标对象, 属性名, 属性值)
//Vue.set(vm.$data.a, 'email', 'jack@126.com')
//Vue.set(vm.a, 'email', 'jack@123.com')
vm.$set(vm.a, "email", "jack@456.com");
//3、 避免在运行时向Vue实例或其根$data添加响应式
// 不能直接给vm / vm.$data 追加响应式属性。只能在声明时提前定义好。
//Vue.set(vm, 'x', '1')
//Vue.set(vm.$data, 'x', '1')
</script>
</body>2.16.5. Vue没有给数组下标0,1,2,3....添加响应式，怎么处理？
① 调用Vue提供的7个API：
push()
pop()
reverse()
splice()
shift()
unshift()
sort()
或者使用：
Vue.set(数组对象, ‘index’, 值)
vm.$set(数组对象, ‘index’, 值)
<body>
<!--
1. 通过数组的下标去修改数组中的元素，默认情况下是没有添加响应式处理的。怎么解决？
可以通过控制台去修改数组元素
2. 第一种方案：
vm.$set(数组对象, 下标, 值) vm.$set(vm.users,0,'杰克')
Vue.set(数组对象, 下标, 值) vm.set(vm.users,0,'杰克')
3. 第二种方案：
push() 在数组 尾部逐个添加 元素，返回结果数组的长度，能接收任意数量参数，push() 修改了原数组。
pop() 移除数组最后一项，返回的是被移除项。修改原数组
reverse() 可将数组进行倒序,此方法会改变原数组。
splice() 通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。
shift() 删除数组的第一项元素，返回被删除的元素， 修改原数组
unshift() 向数组的头部添加元素，返回的是结果数组的长度，修改原数组
sort() 可将数组项灵活地进行升序或降序排列,此方法会改变原数组。
在Vue当中，通过以上的7个方法来给数组添加响应式处理。
-->
<div id="app">
<h1>{{msg}}</h1>
<ul>
<li v-for="user in users">{{user}}</li>
</ul>
<ul>
<li v-for="vip in vips" :key="vip.id">{{vip.name}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "数组的响应式处理",
users: ["jack", "lucy", "james"],
vips: [
{ id: "111", name: "zhangsan" },
{ id: "222", name: "lisi" },
],
},
methods: {
update(){
// this.users[0]='tom'
// this.users.reverse()
console.log(this.users);
}
}
});
</script>
</body>