一文详解Vue响应式数据的原理

// 假设这个是我们创建的 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]; // 删除代理对象中的这个属性
  },
});

// 假设这个是我们创建的 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]; // 删除代理数组中的这个值
  },
});

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];
  },
});