vue3源码分析 reactive原理

Vue 3 的响应式实现原理主要是通过 Proxy 对象来实现的。在 Vue 3 中，每个响应式对象都会被包装成一个 Proxy 对象，当访问这个对象的属性时，会触发 get 拦截器函数，当修改这个对象的属性时，会触发 set 拦截器函数。实现这个功能的方法是reactive()

export function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      // target就是raw，key就是raw的key
      // raw = {foo : 1}  target就是raw，key就是foo
      const res = Reflect.get(target, key);
      //  track 收集依赖
      track(target, key);
      return res;
    },
    set(target, key, value) {
      const res = Reflect.set(target, key, value);
      //  trigger 触发依赖
      trigger(target, key);
      return res;
    },
  });
}

在访问这个对象的属性时，调用track()收集依赖。修改这个对象的属性时，会调用trigger()触发依赖