js高阶-响应式原理

what

• 当变量变化的时候,涉及到这个变量的操作重新执行
• 更多是针对对象类型进行监听(原始数据类型是不变的,任何的修改实质是创建了新值)

how

• 响应式对象创建 Proxy
• 响应式对象与依赖之间的映射关系 weakMap-map-set
• 依赖函数收集

创建响应式对象

vue3

//响应式对象创建

function reactive(obj) {
   

  return new Proxy(obj, {
   

    get(target, key) {
   

      const depend = getDepend(target, key);

      //依赖收集

      depend.addDepend();

      //返回

      return Reflect.get(target, key);

    },

    set(target, key, value) {
   

      const depend = getDepend(target, key);

      depend.notify();

      Reflect.set(target