能否手写vue3响应式原理-面试进阶

（二）响应式原理

利用ES6中Proxy作为拦截器，在get时收集依赖，在set时触发依赖，来实现响应式。

（三）手写实现

1、实现Reactive

基于原理，我们可以先写一下测试用例

 //reactive.spec.ts
 describe("effect", () => {
   it("happy path", () => {
     const original = { foo: 1 }; //原始数据
     const observed = reactive(original); //响应式数据
     expect(observed).not.toBe(original);
     expect(observed.foo).toBe(1); //正常获取数据
     expect(isReactive(observed)).toBe(true);
     expect(isReactive(original)).toBe(false);
     expect(isProxy(observed)).toBe(true);
   });
 });

首先实现数据的拦截处理，通过ES6的Proxy，实现获取和赋值操作。

 //reactive.ts
 //对new Proxy()进行包装
 export function reactive(raw) {
   return createActiveObject(raw, mutableHandlers);
 }
 
 function createActiveObject(raw: any, baseHandlers) {
   //直接返回一个Proxy对象，实现响应式
   return new Proxy(raw, baseHandlers);
 }

 //baseHandler.ts
 //抽离出一个handler对象
 export const mutableHandlers = {
   get:createGetter(),
   set:createSetter(),
 };
 
 function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
   return function get(target, key) {
     const res = Reflect.get(target, key);
     // 看看res是否是一个object
     if (isObject(res)) {
       //如果是，则进行嵌套处理,使得返回的对象中的 对象 也具备响应式
       return isReadOnly ? readonly(res) : reactive(res);
     }
     if (!isReadOnly) {
       //如果不是readonly类型，则收集依赖
       track(target, key);
     }
     return res;
   };
 }
 
 function createSetter() {
   return function set(target, key, value) {
     const res = Reflect.set(target, key, value);
     //触发依赖
     trigger(target, key);
     return res;
   };
 }

从上述代码中，我们可以⚠️注意到track(target, key) 和trigger(target, key) 这两个函数，分别是对依赖的收集和触发。

依赖：我们可以把依赖认为是把用户对数据的操控（用户函数，副作用函数）包装成一个东西，我们在get的时候将依赖一个一个收集起来，set的时候全部触发，即可实现响应式效果。

2、实现依赖的收集和触发

 //effect.ts
 //全局变量
 let activeEffect: ReactiveEffect; //当前的依赖
 let shouldTrack: Boolean; //是否收集依赖
 const targetMap = new WeakMap(); //依赖树

targetMap结构：

targetMap: {
每一个target（depsMap）：{
每一个key（depSet）：[
每一个依赖
]
}
}

WeakMap和Map的区别

1、WeakMap只接受对象作为key，如果设置其他类型的数据作为key，会报错。

2、WeakMap的key所引用的对象都是弱引用，只要对象的其他引用被删除，垃圾回收机制就会释放该对象占用的内存，从而避免内存泄漏。

3、由于WeakMap的成员随时可能被垃圾回收机制回收，成员的数量不稳定，所以没有size属性。

4、没有clear()方法

5、不能遍历

首先我们定义一个依赖类，称为ReactiveEffect，对用户函数进行包装，赋予一些属性和方法。

 //effect.ts
 //响应式依赖 — ReactiveEffect类
 class ReactiveEffect {
   private _fn: any;  //用户函数，
   active = true; //表示当前依赖是否激活，如果清除过则为false
   deps: any[] = []; //包含该依赖的deps
   onStop?: () => void;  //停止该依赖的回调函数
   public scheduler: Function;  //调度函数
   
   //构造函数
   constructor(fn, scheduler?) {
     this._fn = fn;
     this.scheduler = scheduler;
   }
   //执行副作用函数
   run() {
     //用户函数，可以报错，需要用try包裹
     try {
       //如果当前依赖不是激活状态，不进行依赖收集，直接返回
       if (!this.active) {
         return this._fn();
       }
       //开启依赖收集
       shouldTrack = true;
       activeEffect = this;
       //调用时会触发依赖收集
       const result = this._fn();
       //关闭依赖收集
       shouldTrack = false;
       //返回结果
       return result;
     } finally {
       //todo
     }
   }
 }

effect影响函数

创建一个用户函数作用函数，称为effect，这个函数的功能为基于ReactiveEffect类创建一个依赖，触发用户函数（的时候，触发依赖收集），返回用户函数。

 //创建一个依赖
 export function effect(fn, option: any = {}) {
   //为当前的依赖创建响应式实例
   const _effect = new ReactiveEffect(fn, option.scheduler);
   Object.assign(_effect, option);
   //最开始调用一次,其中会触发依赖收集  _effect.run() -> _fn() -> get() -> track()
   _effect.run();
   const runner: any = _effect.run.bind(_effect);
   //在runner上挂载依赖，方便在其他地方通过runner访问到该依赖
   runner.effect = _effect;
   return runner;
 }

bind()：在原函数的基础上创建一个新函数，使新函数的this指向传入的第一个参数，其他参数作为新函数的参数

用户触发依赖收集时，将依赖添加到targetMap中。

收集/添加依赖

 //把依赖添加到targetMap对应target的key中，在重新set时在trigger中重新触发
 export function track(target: Object, key) {
   //如果不是track的状态，直接返回
   if (!isTracking()) return;
 
   // target -> key -> dep
   //获取对应target，获取不到则创建一个，并加进targetMap中
   let depsMap = targetMap.get(target);
   if (!depsMap) {
     targetMap.set(target, (depsMap = new Map()));
   }
   //获取对应key，获取不到则创建一个，并加进target中
   let depSet = depsMap.get(key);
   if (!depSet) {
     depsMap.set(key, (depSet = new Set()));
   }
 
   //如果depSet中已经存在该依赖，直接返回
   if (depSet.has(activeEffect)) return;
 
   //添加依赖
   trackEffects(depSet);
 }
 
 export function trackEffects(dep) {
   //往target中添加依赖
   dep.add(activeEffect);
   //添加到当前依赖的deps数组中
   activeEffect.deps.push(dep);
 }

触发依赖

 //一次性触发对应target中key的所有依赖
 export function trigger(target, key) {
   let depsMap = targetMap.get(target);
   let depSet = depsMap.get(key);
   //触发依赖
   triggerEffects(depSet);
 }
 
 export function triggerEffects(dep) {
   for (const effect of dep) {
     if (effect.scheduler) {
       effect.scheduler();
     } else {
       effect.run();
     }
   }
 }

3、移除/停止依赖

我们在ReactiveEffect这个类中，增加一个stop方法，来暂停依赖收集和清除已经存在的依赖

 //响应式依赖 — 类
 class ReactiveEffect {
   private _fn: any;  //用户函数，
   active = true; //表示当前依赖是否激活，如果清除过则为false
   deps: any[] = []; //包含该依赖的deps
   onStop?: () => void;  //停止该依赖的回调函数
   public scheduler: Function;  //调度函数
  
   //...
   
   stop() {
     if (this.active) {
       cleanupEffect(this);
       //执行回调
       if (this.onStop) {
         this.onStop();
       }
       //清除激活状态
       this.active = false;
     }
   }
 }
 
 //清除该依赖挂载的deps每一项中的该依赖
 function cleanupEffect(effect) {
   effect.deps.forEach((dep: any) => {
     dep.delete(effect);
   });
   effect.deps.length = 0;
 }
 
 //移除一个依赖
 export function stop(runner) {
   runner.effect.stop();
 }

（四）衍生类型

1、实现readonly

readonly相比于reactive，实现上相对比较简单，它是一个只读类型，不会涉及set操作，更不需要收集/触发依赖。

 export function readonly(raw) {
   return createActiveObject(raw, readonlyHandlers);
 }
 
 export const readonlyHandlers = {
   get: readonlyGet,
   set: (key, target) => {
     console.warn(`key:${key} set 失败，因为target是一个readonly对象`, target);
     return true;
   },
 };
 
 const readonlyGet = createGetter(true);
 
 function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
   return function get(target, key) {
     if (key === ReactiveFlags.IS_REACTIVE) {
       return !isReadOnly;
     } else if (key === ReactiveFlags.IS_READONLY) {
       return isReadOnly;
     }
 
     //...
 
     // 看看res是否是一个object
     if (isObject(res)) {
       return isReadOnly ? readonly(res) : reactive(res);
     }
 
     if (!isReadOnly) {
       //收集依赖
       track(target, key);
     }
     return res;
   };
 }

2、实现shallowReadonly

我们先看一下shallow的含义

shallow：不深的, 浅的，不深的, 不严肃的, 肤浅的，浅薄的。

那么shallowReadonly，指的是只对最外层进行限制，而内部的仍然是一个普通的、正常的值。

 //shallowReadonly.ts
 export function shallowReadonly(raw) {
   return createActiveObject(raw, shallowReadonlyHandlers);
 }
 
 export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
   get: shallowReadonlyGet,
 });
 
 const shallowReadonlyGet = createGetter(true, true);
 
 function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
   return function get(target, key) {
     //..
     const res = Reflect.get(target, key);
     
     //是否shallow,是的话很直接返回
     if (shallow) {
       return res;
     }
     
     if (isObject(res)) {
       //...
     }
   };
 }

3、实现ref

ref相对reactive而言，实际上他不存在嵌套关系，就是一个value。

 //ref.ts
 export function ref(value: any) {
   return new RefImpl(value);
 }

我们来实现一下RefImpl类，原理其实跟reactive类似，只是一些细节处不同。

 //ref.ts
 class RefImpl {
   private _value: any; //转化后的值
   public dep; //依赖容器
   private _rawValue: any; //原始值，
   public _v_isRef = true; //判断ref类型
   constructor(value) {
     this._rawValue = value; //记录原始值
     this._value = convert(value); //存储转化后的值
     this.dep = new Set(); //创建依赖容器
   }
   get value() {
     trackRefValue(this); //收集依赖
     return this._value;
   }
   set value(newValue) {
     //新老值不同，才触发更改
     if (hasChanged(newValue, this._rawValue)) {
       // 一定先修改value，再触发依赖
       this._rawValue = newValue;
       this._value = convert(newValue);
       triggerEffects(this.dep);
     }
   }
 }

 //ref.ts
 //对value进行转换（value可能是object）
 export function convert(value: any) {
   return isObject(value) ? reactive(value) : value;
 }
 
 export function trackRefValue(ref: RefImpl) {
   if (isTracking()) {
     trackEffects(ref.dep);
   }
 }
 
 //effect.ts
 export function isTracking(): Boolean {
   //是否开启收集依赖 & 是否有依赖
   return shouldTrack && activeEffect !== undefined;
 }
 
 export function trackEffects(dep) {
   dep.add(activeEffect);
   activeEffect.deps.push(dep);
 }
 
 export function triggerEffects(dep) {
   for (const effect of dep) {
     if (effect.scheduler) {
       effect.scheduler();
     } else {
       effect.run();
     }
   }
 }

实现proxyRefs

 //实现对ref对象进行代理
 //如user = {
 //  age:ref(10),
 //  ...
 //}
 export function proxyRefs(ObjectWithRefs) {
   return new Proxy(ObjectWithRefs, {
     get(target, key) {
       // 如果是ref 返回.value
       //如果不是 返回value
       return unRef(Reflect.get(target, key));
     },
     set(target, key, value) {
       if (isRef(target[key]) && !isRef(value)) {
         target[key].value = value;
         return true; //?
       } else {
         return Reflect.set(target, key, value);
       }
     },
   });
 }

4、实现computed

computed的实现也很巧妙，利用调度器机制和一个私有变量_value，实现缓存和惰性求值。

通过注解（一）（二）（三）可理解其实现流程

 //computed
 import { ReactiveEffect } from "./effect";
 
 class computedRefImpl {
   private _dirty: boolean = true;
   private _effect: ReactiveEffect;
   private _value: any;
 
   constructor(getter) {
     //创建时，会创建一个响应式实例，并且挂载
     this._effect = new ReactiveEffect(getter, () => {
       //（三）
       //当监听的值发生改变时，会触发set，此时触发当前依赖
       //因为存在调度器，不会立刻执行用户fn（实现了lazy），而是将_dirty更改为true
       //在下一次用户get时，会调用run方法，重新拿到最新的值返回
       if (!this._dirty) {
         this._dirty = true;
       }
     });
   }
 
   get value() {
     //（一）
     //默认_dirty是true
     //那么在第一次get的时候，会触发响应式实例的run方法，触发依赖收集
     //同时拿到用户fn的值，存储起来，然后返回出去
     if (this._dirty) {
       this._dirty = false;
       this._value = this._effect.run();
     }
     //（二）
     //当监听的值没有改变时，_dirty一直为false
     //所以，第二次get时，因为_dirty为false，那么直接返回存储起来的_value
     return this._value;
   }
 }
 
 export function computed(getter) {
   //创建一个computed实例
   return new computedRefImpl(getter);
 }

（五）工具类

 //是否是reactive响应式类型
 export function isReactive(target) {
   return !!target[ReactiveFlags.IS_REACTIVE];
 }
 //是否是readonly响应式类型
 export function isReadOnly(target) {
   return !!target[ReactiveFlags.IS_READONLY];
 }
 //是否是响应式对象
 export function isProxy(target) {
   return isReactive(target) || isReadOnly(target);
 }
 //是否是对象
 export function isObject(target) {
   return typeof target === "object" && target !== null;
 }
 //是否是ref
 export function isRef(ref: any) {
   return !!ref._v_isRef;
 }
 //解构ref
 export function unRef(ref: any) {
   return isRef(ref) ? ref.value : ref;
 }
 //是否改变
 export const hasChanged = (val, newVal) => {
   return !Object.is(val, newVal);
 };

判断响应式类型的依据是，在get的时候，检查传进来的key是否等于某枚举值来做为判断依据，在get中加入

 //reactive.ts
 export const enum ReactiveFlags {
   IS_REACTIVE = "__v_isReactive",
   IS_READONLY = "__v_isReadOnly",
 }
 
 //baseHandler.ts
 function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
   return function get(target, key) {
     //...
     if (key === ReactiveFlags.IS_REACTIVE) {
       return !isReadOnly;
     } else if (key === ReactiveFlags.IS_READONLY) {
       return isReadOnly;
     }
     //...
   };
 }

利用ES6中Proxy作为拦截器，在get时收集依赖，在set时触发依赖，来实现响应式。

（三）手写实现

1、实现Reactive

基于原理，我们可以先写一下测试用例

 //reactive.spec.ts
 describe("effect", () => {
   it("happy path", () => {
     const original = { foo: 1 }; //原始数据
     const observed = reactive(original); //响应式数据
     expect(observed).not.toBe(original);
     expect(observed.foo).toBe(1); //正常获取数据
     expect(isReactive(observed)).toBe(true);
     expect(isReactive(original)).toBe(false);
     expect(isProxy(observed)).toBe(true);
   });
 });

首先实现数据的拦截处理，通过ES6的Proxy，实现获取和赋值操作。

 //reactive.ts
 //对new Proxy()进行包装
 export function reactive(raw) {
   return createActiveObject(raw, mutableHandlers);
 }
 
 function createActiveObject(raw: any, baseHandlers) {
   //直接返回一个Proxy对象，实现响应式
   return new Proxy(raw, baseHandlers);
 }

 //baseHandler.ts
 //抽离出一个handler对象
 export const mutableHandlers = {
   get:createGetter(),
   set:createSetter(),
 };
 
 function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
   return function get(target, key) {
     const res = Reflect.get(target, key);
     // 看看res是否是一个object
     if (isObject(res)) {
       //如果是，则进行嵌套处理,使得返回的对象中的 对象 也具备响应式
       return isReadOnly ? readonly(res) : reactive(res);
     }
     if (!isReadOnly) {
       //如果不是readonly类型，则收集依赖
       track(target, key);
     }
     return res;
   };
 }
 
 function createSetter() {
   return function set(target, key, value) {
     const res = Reflect.set(target, key, value);
     //触发依赖
     trigger(target, key);
     return res;
   };
 }

从上述代码中，我们可以⚠️注意到track(target, key) 和trigger(target, key) 这两个函数，分别是对依赖的收集和触发。

依赖：我们可以把依赖认为是把用户对数据的操控（用户函数，副作用函数）包装成一个东西，我们在get的时候将依赖一个一个收集起来，set的时候全部触发，即可实现响应式效果。

2、实现依赖的收集和触发

 //effect.ts
 //全局变量
 let activeEffect: ReactiveEffect; //当前的依赖
 let shouldTrack: Boolean; //是否收集依赖
 const targetMap = new WeakMap(); //依赖树

targetMap结构：

targetMap: {
每一个target（depsMap）：{
每一个key（depSet）：[
每一个依赖
]
}
}

WeakMap和Map的区别

1、WeakMap只接受对象作为key，如果设置其他类型的数据作为key，会报错。

2、WeakMap的key所引用的对象都是弱引用，只要对象的其他引用被删除，垃圾回收机制就会释放该对象占用的内存，从而避免内存泄漏。

3、由于WeakMap的成员随时可能被垃圾回收机制回收，成员的数量不稳定，所以没有size属性。

4、没有clear()方法

5、不能遍历

首先我们定义一个依赖类，称为ReactiveEffect，对用户函数进行包装，赋予一些属性和方法。

 //effect.ts
 //响应式依赖 — ReactiveEffect类
 class ReactiveEffect {
   private _fn: any;  //用户函数，
   active = true; //表示当前依赖是否激活，如果清除过则为false
   deps: any[] = []; //包含该依赖的deps
   onStop?: () => void;  //停止该依赖的回调函数
   public scheduler: Function;  //调度函数
   
   //构造函数
   constructor(fn, scheduler?) {
     this._fn = fn;
     this.scheduler = scheduler;
   }
   //执行副作用函数
   run() {
     //用户函数，可以报错，需要用try包裹
     try {
       //如果当前依赖不是激活状态，不进行依赖收集，直接返回
       if (!this.active) {
         return this._fn();
       }
       //开启依赖收集
       shouldTrack = true;
       activeEffect = this;
       //调用时会触发依赖收集
       const result = this._fn();
       //关闭依赖收集
       shouldTrack = false;
       //返回结果
       return result;
     } finally {
       //todo
     }
   }
 }

effect影响函数

创建一个用户函数作用函数，称为effect，这个函数的功能为基于ReactiveEffect类创建一个依赖，触发用户函数（的时候，触发依赖收集），返回用户函数。

 //创建一个依赖
 export function effect(fn, option: any = {}) {
   //为当前的依赖创建响应式实例
   const _effect = new ReactiveEffect(fn, option.scheduler);
   Object.assign(_effect, option);
   //最开始调用一次,其中会触发依赖收集  _effect.run() -> _fn() -> get() -> track()
   _effect.run();
   const runner: any = _effect.run.bind(_effect);
   //在runner上挂载依赖，方便在其他地方通过runner访问到该依赖
   runner.effect = _effect;
   return runner;
 }

bind()：在原函数的基础上创建一个新函数，使新函数的this指向传入的第一个参数，其他参数作为新函数的参数

用户触发依赖收集时，将依赖添加到targetMap中。

收集/添加依赖

 //把依赖添加到targetMap对应target的key中，在重新set时在trigger中重新触发
 export function track(target: Object, key) {
   //如果不是track的状态，直接返回
   if (!isTracking()) return;
 
   // target -> key -> dep
   //获取对应target，获取不到则创建一个，并加进targetMap中
   let depsMap = targetMap.get(target);
   if (!depsMap) {
     targetMap.set(target, (depsMap = new Map()));
   }
   //获取对应key，获取不到则创建一个，并加进target中
   let depSet = depsMap.get(key);
   if (!depSet) {
     depsMap.set(key, (depSet = new Set()));
   }
 
   //如果depSet中已经存在该依赖，直接返回
   if (depSet.has(activeEffect)) return;
 
   //添加依赖
   trackEffects(depSet);
 }
 
 export function trackEffects(dep) {
   //往target中添加依赖
   dep.add(activeEffect);
   //添加到当前依赖的deps数组中
   activeEffect.deps.push(dep);
 }

触发依赖

 //一次性触发对应target中key的所有依赖
 export function trigger(target, key) {
   let depsMap = targetMap.get(target);
   let depSet = depsMap.get(key);
   //触发依赖
   triggerEffects(depSet);
 }
 
 export function triggerEffects(dep) {
   for (const effect of dep) {
     if (effect.scheduler) {
       effect.scheduler();
     } else {
       effect.run();
     }
   }
 }

3、移除/停止依赖

我们在ReactiveEffect这个类中，增加一个stop方法，来暂停依赖收集和清除已经存在的依赖

 //响应式依赖 — 类
 class ReactiveEffect {
   private _fn: any;  //用户函数，
   active = true; //表示当前依赖是否激活，如果清除过则为false
   deps: any[] = []; //包含该依赖的deps
   onStop?: () => void;  //停止该依赖的回调函数
   public scheduler: Function;  //调度函数
  
   //...
   
   stop() {
     if (this.active) {
       cleanupEffect(this);
       //执行回调
       if (this.onStop) {
         this.onStop();
       }
       //清除激活状态
       this.active = false;
     }
   }
 }
 
 //清除该依赖挂载的deps每一项中的该依赖
 function cleanupEffect(effect) {
   effect.deps.forEach((dep: any) => {
     dep.delete(effect);
   });
   effect.deps.length = 0;
 }
 
 //移除一个依赖
 export function stop(runner) {
   runner.effect.stop();
 }

（四）衍生类型

1、实现readonly

readonly相比于reactive，实现上相对比较简单，它是一个只读类型，不会涉及set操作，更不需要收集/触发依赖。

 export function readonly(raw) {
   return createActiveObject(raw, readonlyHandlers);
 }
 
 export const readonlyHandlers = {
   get: readonlyGet,
   set: (key, target) => {
     console.warn(`key:${key} set 失败，因为target是一个readonly对象`, target);
     return true;
   },
 };
 
 const readonlyGet = createGetter(true);
 
 function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
   return function get(target, key) {
     if (key === ReactiveFlags.IS_REACTIVE) {
       return !isReadOnly;
     } else if (key === ReactiveFlags.IS_READONLY) {
       return isReadOnly;
     }
 
     //...
 
     // 看看res是否是一个object
     if (isObject(res)) {
       return isReadOnly ? readonly(res) : reactive(res);
     }
 
     if (!isReadOnly) {
       //收集依赖
       track(target, key);
     }
     return res;
   };
 }

2、实现shallowReadonly

我们先看一下shallow的含义

shallow：不深的, 浅的，不深的, 不严肃的, 肤浅的，浅薄的。

那么shallowReadonly，指的是只对最外层进行限制，而内部的仍然是一个普通的、正常的值。

 //shallowReadonly.ts
 export function shallowReadonly(raw) {
   return createActiveObject(raw, shallowReadonlyHandlers);
 }
 
 export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
   get: shallowReadonlyGet,
 });
 
 const shallowReadonlyGet = createGetter(true, true);
 
 function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
   return function get(target, key) {
     //..
     const res = Reflect.get(target, key);
     
     //是否shallow,是的话很直接返回
     if (shallow) {
       return res;
     }
     
     if (isObject(res)) {
       //...
     }
   };
 }

3、实现ref

ref相对reactive而言，实际上他不存在嵌套关系，就是一个value。

 //ref.ts
 export function ref(value: any) {
   return new RefImpl(value);
 }

我们来实现一下RefImpl类，原理其实跟reactive类似，只是一些细节处不同。

 //ref.ts
 class RefImpl {
   private _value: any; //转化后的值
   public dep; //依赖容器
   private _rawValue: any; //原始值，
   public _v_isRef = true; //判断ref类型
   constructor(value) {
     this._rawValue = value; //记录原始值
     this._value = convert(value); //存储转化后的值
     this.dep = new Set(); //创建依赖容器
   }
   get value() {
     trackRefValue(this); //收集依赖
     return this._value;
   }
   set value(newValue) {
     //新老值不同，才触发更改
     if (hasChanged(newValue, this._rawValue)) {
       // 一定先修改value，再触发依赖
       this._rawValue = newValue;
       this._value = convert(newValue);
       triggerEffects(this.dep);
     }
   }
 }

 //ref.ts
 //对value进行转换（value可能是object）
 export function convert(value: any) {
   return isObject(value) ? reactive(value) : value;
 }
 
 export function trackRefValue(ref: RefImpl) {
   if (isTracking()) {
     trackEffects(ref.dep);
   }
 }
 
 //effect.ts
 export function isTracking(): Boolean {
   //是否开启收集依赖 & 是否有依赖
   return shouldTrack && activeEffect !== undefined;
 }
 
 export function trackEffects(dep) {
   dep.add(activeEffect);
   activeEffect.deps.push(dep);
 }
 
 export function triggerEffects(dep) {
   for (const effect of dep) {
     if (effect.scheduler) {
       effect.scheduler();
     } else {
       effect.run();
     }
   }
 }

实现proxyRefs

 //实现对ref对象进行代理
 //如user = {
 //  age:ref(10),
 //  ...
 //}
 export function proxyRefs(ObjectWithRefs) {
   return new Proxy(ObjectWithRefs, {
     get(target, key) {
       // 如果是ref 返回.value
       //如果不是 返回value
       return unRef(Reflect.get(target, key));
     },
     set(target, key, value) {
       if (isRef(target[key]) && !isRef(value)) {
         target[key].value = value;
         return true; //?
       } else {
         return Reflect.set(target, key, value);
       }
     },
   });
 }

4、实现computed

computed的实现也很巧妙，利用调度器机制和一个私有变量_value，实现缓存和惰性求值。

通过注解（一）（二）（三）可理解其实现流程

 //computed
 import { ReactiveEffect } from "./effect";
 
 class computedRefImpl {
   private _dirty: boolean = true;
   private _effect: ReactiveEffect;
   private _value: any;
 
   constructor(getter) {
     //创建时，会创建一个响应式实例，并且挂载
     this._effect = new ReactiveEffect(getter, () => {
       //（三）
       //当监听的值发生改变时，会触发set，此时触发当前依赖
       //因为存在调度器，不会立刻执行用户fn（实现了lazy），而是将_dirty更改为true
       //在下一次用户get时，会调用run方法，重新拿到最新的值返回
       if (!this._dirty) {
         this._dirty = true;
       }
     });
   }
 
   get value() {
     //（一）
     //默认_dirty是true
     //那么在第一次get的时候，会触发响应式实例的run方法，触发依赖收集
     //同时拿到用户fn的值，存储起来，然后返回出去
     if (this._dirty) {
       this._dirty = false;
       this._value = this._effect.run();
     }
     //（二）
     //当监听的值没有改变时，_dirty一直为false
     //所以，第二次get时，因为_dirty为false，那么直接返回存储起来的_value
     return this._value;
   }
 }
 
 export function computed(getter) {
   //创建一个computed实例
   return new computedRefImpl(getter);
 }

（五）工具类

 //是否是reactive响应式类型
 export function isReactive(target) {
   return !!target[ReactiveFlags.IS_REACTIVE];
 }
 //是否是readonly响应式类型
 export function isReadOnly(target) {
   return !!target[ReactiveFlags.IS_READONLY];
 }
 //是否是响应式对象
 export function isProxy(target) {
   return isReactive(target) || isReadOnly(target);
 }
 //是否是对象
 export function isObject(target) {
   return typeof target === "object" && target !== null;
 }
 //是否是ref
 export function isRef(ref: any) {
   return !!ref._v_isRef;
 }
 //解构ref
 export function unRef(ref: any) {
   return isRef(ref) ? ref.value : ref;
 }
 //是否改变
 export const hasChanged = (val, newVal) => {
   return !Object.is(val, newVal);
 };

判断响应式类型的依据是，在get的时候，检查传进来的key是否等于某枚举值来做为判断依据，在get中加入

 //reactive.ts
 export const enum ReactiveFlags {
   IS_REACTIVE = "__v_isReactive",
   IS_READONLY = "__v_isReadOnly",
 }
 
 //baseHandler.ts
 function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
   return function get(target, key) {
     //...
     if (key === ReactiveFlags.IS_REACTIVE) {
       return !isReadOnly;
     } else if (key === ReactiveFlags.IS_READONLY) {
       return isReadOnly;
     }
     //...
   };
 }

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,372评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,368评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,415评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,157评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,171评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,125评论 1赞 297
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,028评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,887评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,310评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,533评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,690评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,411评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,004评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,659评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,812评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,693评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,577评论 2赞 353

能否手写vue3响应式原理-面试进阶

能否手写vue3响应式原理-面试进阶

（二）响应式原理

（三）手写实现

1、实现Reactive

2、实现依赖的收集和触发

effect影响函数

收集/添加依赖

触发依赖

3、移除/停止依赖

（四）衍生类型

1、实现readonly

2、实现shallowReadonly

3、实现ref

4、实现computed

（五）工具类

（三）手写实现

1、实现Reactive

更多面试题解答参见前端手写面试题详细解答

2、实现依赖的收集和触发

effect影响函数

收集/添加依赖

触发依赖

3、移除/停止依赖

（四）衍生类型

1、实现readonly

2、实现shallowReadonly

3、实现ref

4、实现computed

（五）工具类

推荐阅读更多精彩内容

能否手写vue3响应式原理-面试进阶

（二）响应式原理

（三）手写实现

1、实现Reactive

2、实现依赖的收集和触发

effect影响函数

收集/添加依赖

触发依赖

3、移除/停止依赖

（四）衍生类型

1、实现readonly

2、实现shallowReadonly

3、实现ref

4、实现computed

（五）工具类

（三）手写实现

1、实现Reactive

更多面试题解答参见 前端手写面试题详细解答

2、实现依赖的收集和触发

effect影响函数

收集/添加依赖

触发依赖

3、移除/停止依赖

（四）衍生类型

1、实现readonly

2、实现shallowReadonly

3、实现ref

4、实现computed

（五）工具类

推荐阅读更多精彩内容

更多面试题解答参见前端手写面试题详细解答