关于javascript:能否手写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;     }     //...   }; }

关于javascript:能否手写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

（五）工具类

（二）响应式原理

（三）手写实现

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

（五）工具类

更多面试题解答参见前端手写面试题具体解答

更多面试题解答参见前端手写面试题具体解答