vue3与vue2响应式原理对比

1. 模拟vue2实现响应式

let person = { name:'张三', }
//vue2实现响应式 
Object.defineProperty(person,'age',{ 
  value:18,
  enumerable:true,//控制属性是否可枚举，默认false 
  writable:true,//控制属性是否可修改，默认false 
  configurable:true,//控制属性是否可删除，默认false 
  //当读取person的age属性时，get函数(getter)就会被调用，且返回值 
  get(){ 
      return number
  }, 
  //当修改person的age属性时，get函数(setter)就会被调用，且会收到修改的具体值 
  set(value){ 
      number = value 
  } 
}) 

2. 模拟vue3实现响应式

let person = { name:'张三', }
const p = new Proxy(person, {
  get(target, propName) {
    console.log(`有人读取了p身上的${propName}属性`, target, propName);
    return target[propName];
  },
  set(target, propName, value) {
    console.log(
      `有人修改了p身上的${propName}属性`,
      target,
      propName,
      value
    );
    target[propName] = value;
  },
  deleteProperty(target, propName) {
    console.log(`有人读删除了p身上的${propName}属性`, target, propName);
    return delete target[propName];
  },
});