vue响应式原理

vue2 Object.defineProperty

在vue2中，响应式是通过Object.defineProperty实现数据响应式的，具体可以引入一个案例，就是有一个对象，这个对象被初始化好了之后，然后我给这个对象添加新的属性，但是这个新的属性并不是响应式的，原因是对象在初始化的时候属性已经通过Object.defineProperty被赋值为响应式的了，但是新添加的属性没有触发Object.defineProperty的get和set方法，也就没有被监听到，因此也就不是响应式的，想要解决这个方法可以通过vue.set方法将这个对象转变为响应式，set方法是如何将对象转变为响应式的呢，具体的方法是调用了defineReactive方法，将对象转变为响应式。

function set (target: Array<any> | Object, key: any, val: any): any {
  ...
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

具体的reactive函数的实现如下：
在defineReactive函数中，通过Object.defineProperty给对象设置get和set方法，get方法中收集依赖，set方法中更新新的值并通过观察者模式通知相关依赖进行更新。
在set函数中，当值发生变化的时候，调用notify函数通知依赖进行更新，在notify函数中遍历维护的观察者列表，调用观察者的update，对观察者进行更新，这样就实现了数据的响应式，数据更新的时候，视图也就进行了更新。

function defineReactive(obj, key, val) {
    let dep = new Dep(); // 依赖管理器
  
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function() {
        dep.depend(); // 收集依赖
        return val;
      },
      set: function(newVal) {
        if (newVal === val) return;
        val = newVal;
        dep.notify(); // 通知依赖更新
      }
    });
  }
  
  class Dep {
    constructor() {
      this.subscribers = [];
    }
  
    depend() {
      if (currentWatcher) {
        console.log("currentWatcher", currentWatcher);
        this.subscribers.push(currentWatcher);
      }
    }
  
    notify() {
      this.subscribers.forEach(sub => sub.update());
    }
  }
  
  let currentWatcher = null;
  
  class Watcher {
    constructor(vm, updateFn) {
      this.vm = vm;
      this.updateFn = updateFn;
      this.update(); // 初始化时执行一次更新
    }
  
    update() {
      currentWatcher = this;
      this.updateFn.call(this.vm);
      currentWatcher = null;
    }
  }
  
  // 示例用法
  let data = { count: 0 };
  
  // 创建一个Vue实例
  let vm = {};
  Object.keys(data).forEach(key => {
    defineReactive(vm, key, data[key]);
  });
  
  // 创建一个Watcher，当count变化时执行update
  new Watcher(vm, function() {
    console.log("Count updated:", vm.count);
  });
  
  // 修改数据，触发更新
  vm.count = 1;
  

如果对象是嵌套的，那么可以通过递归的方式进行实现响应式：

function observe(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return;
  }

  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key]);
  });
}

由于vue2的Object.definePropertity存在新增的属性无法触发响应式，以及嵌套对象性能方面的缺点，vue3的proxy极大程度上解决了上面的问题

vue3 Proxy

在vue3中，可以通过 ref 和 reactive 创建响应式对象，那么他是如何实现的呢，具体如下：
它通过使用 JavaScript 的 Proxy 对象来实现响应式。以下是 reactive 的简化版本，用于说明其基本实现原理：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      // 收集依赖，此处省略具体实现
      track(target, key);
      return result;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      // 触发更新，此处省略具体实现
      trigger(target, key, oldValue);
      return result;
    },
    // 其他拦截器可以包括 deleteProperty、has、ownKeys 等
  });
}

上述代码使用 Proxy 对象对目标对象进行包装，其中包含了两个主要的拦截器：get 和 set。

1. get 拦截器： 当访问响应式对象的属性时，get 拦截器会被触发。在这里，它会调用 track 函数，用于收集依赖。依赖收集是为了追踪哪些地方依赖于该属性，以便在属性变化时触发更新。
2. set 拦截器： 当设置响应式对象的属性时，set 拦截器会被触发。它会调用 trigger 函数，用于触发更新。在触发更新之前，会记录属性的旧值，以便与新值进行比较。
   对于vue2中属性删除监听不到的问题，vue3还提供了很多其他的监听器，例如监听属性删除的deleteProperty 拦截器等等，都解决了vue2中存在的问题。
   为什么要使用Reflect呢？而不直接使用object[key]这种方式呢？
   直接使用object[key]这种方式可能不会触发一些proxy拦截器，而Reflect.get 是会触发的。

const target = { value: 42 };
const proxy = new Proxy(target, {
  get(target, key, receiver) {
    console.log(`Getting property "${key}"`);
    return Reflect.get(target, key, receiver);
  },
});

console.log(proxy.value); // 42，触发了 Proxy 的拦截器
console.log(proxy['value']); // 42，同样触发了 Proxy 的拦截器
console.log(target['value']); // 42，未触发 Proxy 的拦截器