Vue3 响应式

vue3 使用了 proxy 来代替 defineProperty ，进行响应式处理。

Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 有着多达 13 种拦截方式。

此处只介绍了 Proxy 属性 set 和 get 的简单用法，其他可以参考 《ES6教程》一栏。

const data={name:'大聪明'}
let obj = new Proxy(data, {
   //作为依赖被调取时触发
  get(target, propKey, receiver) {//目标对象、属性名 、proxy 实例本身,get 返回值传递给调取数据的行为
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver); // 返回默认行为，即将值原样返回。
    //Reflect的方法与Proxy的方法一一对应，不管Proxy怎么修改默认行为，始终可以在Reflect上获取默认行为
  },
    //当属性被赋值时触发，包括新定义了一个属性
  set(target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);//此处为返回默认行为相当于不操作
      //return Reflect时或进行 target[propKey]=value 操作时相当于不拦截，即正常赋值
      //注意，严格模式下，set代理如果没有返回true，就会报错,所以建议返回 Reflect 或 true。
  }
});

obj.count = 1
//  setting count!
++obj.count //等于obj.count =obj.count+1
//  getting count!
//  setting count!
//  2