一文详解Vue响应式数据的原理
作者：小吴吴吴呀
在 vue2 的响应式中，存在着添加属性、删除属性、以及通过下标修改数组，但页面不会自动更新的问题。而这些问题在 vue3 中都得以解决。
vue3 采用了 proxy 代理，用于拦截对象中任意属性的变化，包括：属性的读写、属性的添加、属性的删除、以及通过下标修改数组，都可以自动更新页面。
proxy 代理：用于在目标对象之前架设一层拦截，外界对该对象的访问，都必须先通过这层拦截，因此可以对外界的访问进行过滤和改写。
另外 vue3 还采用了 reflect 反射，用于对源对象的属性进行操作。
reflect 反射：是一个 JS 的内置对象，它提供了一系列的方法，这些方法和对象中的功能相对应。经常配合 proxy 使用。proxy 用于拦截，reflect 用于操作。
Proxy 代理的使用【代理对象】：
// 假设这个是我们创建的 reactive 数据
const data = {
name: "张三",
age: 21
};
// 创建 proxy 代理 data 对象，添加到 vue 的实例对象中
// 语法：const vm = new Proxy(要代理的数据, 配置对象)
const vm = new Proxy(data, {
// 当有人读取 vm 的某个属性时调用
get(target, propName) {
// target 就是被代理的这个对象，propName 就是当前操作的属性
console.log(`有人读取了vm身上的${propName}属性`);
return target[propName]; // 返回代理对象中的这个属性
},
// 当有人修改 vm 的某个属性时，或给 vm 添加某个属性时调用
set(target, propName, value) {
// value 就是修改的值
console.log(`有人修改了vm身上的${propName}属性，我要去更新页面了！`);
return (target[index] = value); // 修改或添加这个属性
},
// 当有人删除 vm 的某个属性时调用
deleteProperty(target, propName) {
console.log(`有人删除了vm身上的${propName}属性，我要去更新页面了！`);
return delete target[propName]; // 删除代理对象中的这个属性
},
});注：proxy 不仅能检测到读取属性和修改属性，还能检测到添加属性和删除属性。所以在 vue3 中添加或删除一个对象中的属性时，页面也会自动更新。
注：读取时触发 get 函数、修改或添加时触发 set 函数、删除时触发 deleteProperty 函数。
Proxy 代理的使用【代理数组】：
// 假设这个是我们创建的 reactive 数据
const arr = ["张三", "李四", "王五"];
// 创建 proxy 代理 arr 数组，添加到 vue 的实例对象中
// 语法：const app = new Proxy(要代理的数据, 配置对象)
const app = new Proxy(arr, {
// 当有人读取 app 的某个值时调用
get(target, index) {
// target 就是被代理的这个数组，index 就是当前操作的属性或下标
console.log(`有人读取了app身上下标${index}的值`);
return target[index]; // 返回代理数组中的这个值
},
// 当有人修改 app 的某个值时，或给 app 添加一个值时调用
set(target, index, value) {
// value 就是修改的值
console.log(`有人修改了app身上下标${index}的值，我要去更新页面了！`);
return (target[index] = value); // 修改或添加代理数组中的这个值
},
// 当有人删除 app 的某个值时调用
deleteProperty(target, index) {
console.log(`有人删除了app身上下标${index}的值，我要去更新页面了！`);
return delete target[index]; // 删除代理数组中的这个值
},
});注：proxy 支持通过下标操作数组，例如查看数据、修改数据、增加数据。所以在 vue3 中通过下标修改数组时，页面也会自动更新。
注：在使用 push 等方法的时候，length 属性也会发生变化。所以 vue3 分别判断了 push、pop、unshift、shift 等方法，用于区分拦截的各种情况。
Proxy 代理的使用【深层数据的问题】
const data = {
name: "张三",
age: 20,
arr: ["a", "b", "c"],
obj: { q: 1, w: 2 },
};
const app = new Proxy(data, {
get(target, propName) {
console.log(`有人读取了app身上的${propName}属性`);
return target[propName];
},
set(target, propName, value) {
console.log(`有人修改了app身上的${propName}属性，我要去更新页面了！`);
return (target[propName] = value);
},
deleteProperty(target, propName) {
console.log(`有人删除了app身上的${propName}属性，我要去更新页面了！`);
return delete target[propName];
},
});注：proxy 代理深层数据的时候，只会触发 get 函数，并不会触发 set 函数
注：proxy 只会拦截第一层数据，所以 vue3 对深层数据进行了循环遍历，重新利用 proxy 代理了深层数据。
到此这篇关于一文详解Vue响应式数据的原理的文章就介绍到这了,更多相关Vue响应式数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！