Vue：添加响应式数据
Vue：添加响应式数据
1. 什么是响应式？
修改 data 后，页面自动改变/刷新，这就是响应式。就像我们在使用 Excel 的时候，修改一个单元格中的数据，其它单元格的数据会联动更新，这也是响应式。在前端开发中，响应式是一种非常重要的特性，它使得页面能够根据数据的变化自动更新，提升了用户体验和开发效率。
2. Vue 的响应式是如何实现的？
数据劫持：Vue 底层使用了 Object.defineProperty，将 data 中的数据放到了 _data 中，在 _data 中配置了 setter 方法，当去修改属性值时，setter 方法则被自动调用，setter 方法中不仅修改了属性值，而且还做了其他的事情，例如：重新渲染页面。setter 方法就像半路劫持一样，所以称为数据劫持。
不过，在 Vue 3 中，响应式系统采用了 Proxy 对象来替代 Object.defineProperty。Proxy 提供了更强大和灵活的元编程能力，可以直接监听对象的属性变化，而不需要像 Object.defineProperty 那样逐个属性进行劫持，这在处理嵌套对象和数组时更加高效。
// Vue 3 响应式示例
import { reactive } from 'vue';
const state = reactive({
message: 'Hello, Vue 3!'
});
// 修改属性，自动触发响应式更新
state.message = 'New message';
3. Vue 会给 data 中所有的属性，以及属性中的属性，都会添加响应式。
Vue 在初始化时，会递归地遍历 data 对象的所有属性，使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）为每个属性添加响应式。这意味着无论是直接的属性还是嵌套的属性，只要在 data 中定义，都能实现响应式更新。
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 src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<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>
在 Vue 3 中，由于使用了 Proxy，可以直接通过 reactive 创建的对象添加属性，它会自动具备响应式。
import { reactive } from 'vue';
const state = reactive({
name: 'John'
});
// 直接添加属性，自动具备响应式
state.age = 30;
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 src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<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>
在 Vue 3 中，使用 reactive 创建的数组也能自动处理数组元素的响应式更新，直接通过下标修改元素也会触发页面更新。
import { reactive } from 'vue';
const state = reactive({
numbers: [1, 2, 3]
});
// 直接修改数组元素，自动触发响应式更新
state.numbers[0] = 10;