【vue3源码分析】讲透响应式原理

开发 前端
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用。

[[425939]]

响应式原理架构图

 

 

图片来源:__mxin

前置基础知识

  • Proxy (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
  • Reflect (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect)
  • WeakMap (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)

源码讲解

reactivepackages/reactivity/src/reactive.ts

  1. // 扩展被代理对象的标志属性声明 
  2. export interface Target { 
  3.   [ReactiveFlags.SKIP]?: boolean //是否是不可代理对象,被markRaw()过则为true 
  4.   [ReactiveFlags.IS_REACTIVE]?: boolean //是否被reactive代理过 
  5.   [ReactiveFlags.IS_READONLY]?: boolean //是否被readonly代理过 
  6.   [ReactiveFlags.RAW]?: any //被代理的原对象 const p = reactive(obj); p[ReactiveFlags.RAW] === obj 为true 
  7. function targetTypeMap(rawType: string) { 
  8.   switch (rawType) { 
  9.     case 'Object'
  10.     case 'Array'
  11.       return TargetType.COMMON // 普通引用类型 
  12.     case 'Map'
  13.     case 'Set'
  14.     case 'WeakMap'
  15.     case 'WeakSet'
  16.       return TargetType.COLLECTION // 集合引用类型 
  17.     default
  18.       return TargetType.INVALID // invalid不可被代理的基本数据类型 int boolean string 
  19.   } 
  20.  
  21. // 运用ts函数重载机制让reactive有2种不同类型的入参、返回 
  22. export function reactive<T extends object>(target: T): UnwrapNestedRefs<T> 
  23. export function reactive(target: object) { 
  24.   // if trying to observe a readonly proxy, return the readonly version. 
  25.   if (target && (target as Target)[ReactiveFlags.IS_READONLY]) { 
  26.     return target 
  27.   } 
  28.   return createReactiveObject( 
  29.     target, 
  30.     false, // isReadonly 
  31.     mutableHandlers,  // 用于Object Array 类型创建Proxy 
  32.     mutableCollectionHandlers // 用于Set Map WeakSet WeakMap 类型创建Proxy 
  33.   ) 
  34. // 创建响应式代理对象 
  35. function createReactiveObject( 
  36.   target: Target, 
  37.   isReadonly: boolean, 
  38.   baseHandlers: ProxyHandler<any>, 
  39.   collectionHandlers: ProxyHandler<any
  40. ) { 
  41.   // target已经被代理过,并且不是为了将响应式对象变为只读则直接返回 
  42.   if ( 
  43.     target[ReactiveFlags.RAW] && 
  44.     !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) 
  45.   ) { 
  46.     return target 
  47.   } 
  48.   // 从缓存(readonlyMap,reactiveMap)中查找,如果已经被代理过则直接返回 
  49.   const proxyMap = isReadonly ? readonlyMap : reactiveMap 
  50.   const existingProxy = proxyMap.get(target) 
  51.   if (existingProxy) { 
  52.     return existingProxy 
  53.   } 
  54.   // 只有非基本类型类能被响应式 
  55.   const targetType = getTargetType(target) 
  56.   if (targetType === TargetType.INVALID) { // 是否是基本类型 
  57.     return target 
  58.   } 
  59.   const proxy = new Proxy( 
  60.     target, 
  61.     targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers 
  62.   ) 
  63.   proxyMap.set(target, proxy) // 缓存新代理后的对象 
  64.   return proxy 

packages/reactivity/src/baseHandles.ts

  1. // mutableHandlers是Proxy的代理配置,const r = new Proxy(obj,mutableHandlers) 
  2. export const mutableHandlers: ProxyHandler<object> = { 
  3.   get: createGetter, 
  4.   set: createSetter, 
  5.   deleteProperty, 
  6.   has, 
  7.   ownKeys 
  8. function createGetter(isReadonly = false, shallow = false) { 
  9.   return function get(target: Target, key: string | symbol, receiver: object) { 
  10.     if (key === ReactiveFlags.IS_REACTIVE) { 
  11.       return !isReadonly 
  12.     } else if (key === ReactiveFlags.IS_READONLY) { 
  13.       return isReadonly 
  14.     } else if ( 
  15.       key === ReactiveFlags.RAW && 
  16.       receiver === (isReadonly ? readonlyMap : reactiveMap).get(target) 
  17.     ) { 
  18.       // 如果key'__v_raw未被代理标记属性'且target已被响应式代理过,则直接返回该代理的原对象 
  19.       // 应用场景 const originObj = toRaw(reactive(obj)); originObj === obj 为 true 
  20.       return target 
  21.     } 
  22.     const targetIsArray = isArray(target) 
  23.     if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) { 
  24.       // 代理数组的 'includes''indexOf''lastIndexOf' 方法并触发依赖收集 
  25.       // 代理数组的 'push''pop''shift''unshift''splice' 并触发依赖的副作用effect 
  26.       return Reflect.get(arrayInstrumentations, key, receiver) 
  27.     } 
  28.     const res = Reflect.get(target, key, receiver) 
  29.     if ( 
  30.       isSymbol(key
  31.         ? builtInSymbols.has(key as symbol) 
  32.         : key === `__proto__` || key === `__v_isRef` 
  33.     ) { 
  34.       return res 
  35.     } 
  36.     if (!isReadonly) { 
  37.       // 如果不是只读代理触发依赖收集 
  38.       track(target, TrackOpTypes.GET, key
  39.     } 
  40.     // 如果是shallowReactive()直接返回结果,如果target[key]是引用类型则对该值进行响应式收集 
  41.     // 这里充分说明了vue3 reactive()的时候只代理了target的属性这一层,只有当访问target的某一个引用类型属性时才向下继续代理一层,而不是像vue2一样在初始化的时候迭代代理所有引用类型 
  42.     if (shallow) { 
  43.       return res 
  44.     } 
  45.     if (isRef(res)) { 
  46.       const shouldUnwrap = !targetIsArray || !isIntegerKey(key
  47.       return shouldUnwrap ? res.value : res 
  48.     } 
  49.     if (isObject(res)) { 
  50.       return isReadonly ? readonly(res) : reactive(res) 
  51.     } 
  52.     return res 
  53.   } 
  54. function createSetter(shallow = false) { 
  55.   return function set
  56.     target: object, 
  57.     key: string | symbol, 
  58.     value: unknown, 
  59.     receiver: object 
  60.   ): boolean { 
  61.     const oldValue = (target as any)[key
  62.     if (!shallow) { 
  63.       value = toRaw(value) 
  64.       if (!isArray(target) && isRef(oldValue) && !isRef(value)) { 
  65.         // 如果不是数组,且旧值是ref类型,新值不是ref类型 
  66.         oldValue.value = value 
  67.         return true 
  68.       } 
  69.     } else { 
  70.       // 如果是shallowReactive()返回的proxy,修改其属性时不会触发响应式副作用effect 
  71.     } 
  72.     // 如果是对象返回true,如果是数组看是否是合法下标或length indexOf push等自有属性 
  73.     const hadKey = 
  74.       isArray(target) && isIntegerKey(key
  75.         ? Number(key) < target.length 
  76.         : hasOwn(target, key
  77.     const result = Reflect.set(target, key, value, receiver) 
  78.     // don't trigger if target is something up in the prototype chain of original 
  79.     if (target === toRaw(receiver)) { 
  80.       if (!hadKey) { 
  81.         // 触发该属性的副作用effect,且类型为新增属性 
  82.         trigger(target, TriggerOpTypes.ADDkey, value) 
  83.       } else if (hasChanged(value, oldValue)) { 
  84.         // 触发该属性的副作用effect,且类型为修改属性 
  85.         trigger(target, TriggerOpTypes.SETkey, value, oldValue) 
  86.       } 
  87.     } 
  88.     return result 
  89.   } 
  90. // 代理target的deleteProperty方法,在删除成功后触发依赖的副作用effect 
  91. function deleteProperty(target: object, key: string | symbol): boolean { 
  92.   const hadKey = hasOwn(target, key
  93.   const oldValue = (target as any)[key
  94.   const result = Reflect.deleteProperty(target, key
  95.   if (result && hadKey) { // 如果属性存在并删除成功,触发依赖该属性的副作用effect 
  96.     trigger(target, TriggerOpTypes.DELETEkey, undefined, oldValue) 
  97.   } 
  98.   return result 
  99. // 代理target的has方法,触发该属性的依赖收集 
  100. function has(target: object, key: string | symbol): boolean { 
  101.   const result = Reflect.has(target, key
  102.   if (!isSymbol(key) || !builtInSymbols.has(key)) {  
  103.     // 如果不是symbol类型则触发对该属性依赖的收集 
  104.     track(target, TrackOpTypes.HAS, key
  105.   } 
  106.   return result 
  107. // 代理target的ownKeys方法,触发该属性的依赖收集 
  108. function ownKeys(target: object): (string | number | symbol)[] { 
  109.   // 触发对该属性依赖的收集 
  110.   track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)  
  111.   return Reflect.ownKeys(target) 

readonly

  1. export function readonly<T extends object>( 
  2.   target: T 
  3. ): DeepReadonly<UnwrapNestedRefs<T>> { 
  4.   return createReactiveObject( 
  5.     target, 
  6.     true, // isReadonly 
  7.     readonlyHandlers, // 用于Object Array 类型创建Proxy 
  8.     readonlyCollectionHandlers // 用于Set Map WeakSet WeakMap 类型创建Proxy 
  9.   ) 
  10. export const readonlyHandlers: ProxyHandler<object> = { 
  11.   get: readonlyGet, // 与reactive 的 createGetter一样,只是第一个参数为true 
  12.   set(target, key) { 
  13.     if (__DEV__) { 
  14.       console.warn( 
  15.         `Set operation on key "${String(key)}" failed: target is readonly.`, 
  16.         target 
  17.       ) 
  18.     } 
  19.     return true 
  20.   }, 
  21.   deleteProperty(target, key) { 
  22.     if (__DEV__) { 
  23.       console.warn( 
  24.         `Delete operation on key "${String(key)}" failed: target is readonly.`, 
  25.         target 
  26.       ) 
  27.     } 
  28.     return true 
  29.   } 

ref

  1. // 运用ts函数重载机制让ref有4种不同类型的入参、返回 
  2. export function ref<T extends object>(value: T): ToRef<T> 
  3. export function ref<T>(value: T): Ref<UnwrapRef<T>> 
  4. export function ref<T = any>(): Ref<T | undefined> 
  5. export function ref(value?: unknown) { 
  6.   return createRef(value) 
  7.  
  8. // ref底层不是通过proxy实现的,而是自定义类RefImpl 
  9. function createRef(rawValue: unknown, shallow = false) { 
  10.   if (isRef(rawValue)) { 
  11.     return rawValue 
  12.   } 
  13.   return new RefImpl(rawValue, shallow) 
  14.  
  15. // 将原始数据存储在_value,拦截定义value属性的get set方法实现依赖收集和修改更新响应 
  16. class RefImpl<T> { 
  17.   private _value: T 
  18.   public readonly __v_isRef = true 
  19.   constructor(private _rawValue: T, public readonly _shallow = false) { 
  20.     // 如果是浅响应则无论是引用类型还是基础类型都直接存储原始数据 
  21.     this._value = _shallow ? _rawValue : convert(_rawValue) // 注意covert在下面讲解下 
  22.   } 
  23.   get value() { 
  24.     // get触发依赖收集,toRaw(this)是被ref(data)包裹的原始数据data 
  25.     track(toRaw(this), TrackOpTypes.GET, 'value'
  26.     return this._value 
  27.   } 
  28.   set value(newVal) { 
  29.     // 如果新旧值没有变化则不处理 
  30.     if (hasChanged(toRaw(newVal), this._rawValue)) { 
  31.       this._rawValue = newVal 
  32.       this._value = this._shallow ? newVal : convert(newVal) 
  33.       // trigger 触发依赖此属性的effect重新执行,toRaw(this)是被ref(data)包裹的原始数据data 
  34.       trigger(toRaw(this), TriggerOpTypes.SET'value', newVal) 
  35.     } 
  36.   } 
  37.  
  38. // 如果被const r = ref(data)包裹的原始数据data是引用类型,则对引用类型进行响应式处理,否则直接返回基本类型。 
  39. // 为什么要这样处理呢?  
  40. // 因为如果不这样做的话,r.value的变化会被get set拦截处理,但是r.value.xxx无法被拦截失去了响应 
  41. const convert = <T extends unknown>(val: T): T => isObject(val) ? reactive(val) : val 

  1. // 将reactive数据和ref数据的行为统一成reactive行为 
  2. // 主要用于template中html标签属性绑定时不需要写r.value, 直接写r即可 
  3. // 让ref类型的数据具有reactive类型的行为(不需要通过r.value.xxx访问,直接r.xxx) 
  4. export function proxyRefs<T extends object>( 
  5.   objectWithRefs: T 
  6. ): ShallowUnwrapRef<T> { 
  7.   return isReactive(objectWithRefs) 
  8.     ? objectWithRefs 
  9.     : new Proxy(objectWithRefs, shallowUnwrapHandlers) 
  10. const shallowUnwrapHandlers: ProxyHandler<any> = { 
  11.   get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)), 
  12.   set: (target, key, value, receiver) => { 
  13.     const oldValue = target[key
  14.     if (isRef(oldValue) && !isRef(value)) { 
  15.       oldValue.value = value 
  16.       return true 
  17.     } else { 
  18.       return Reflect.set(target, key, value, receiver) 
  19.     } 
  20.   }, 
  21. export function unref<T>(ref: T): T extends Ref<infer V> ? V : T { 
  22.   return isRef(ref) ? (ref.value as any) : ref 
  23.  
  24. // 将reactive对象的某个属性变成ref类型 
  25. // const r = toRef(reactive({}),'attr'
  26. export function toRef<T extends object, K extends keyof T>( 
  27.   object: T, 
  28.   key: K 
  29. ): ToRef<T[K]> { 
  30.   return isRef(object[key]) 
  31.     ? object[key
  32.     : (new ObjectRefImpl(object, keyas any
  33. class ObjectRefImpl<T extends object, K extends keyof T> { 
  34.   public readonly __v_isRef = true 
  35.   constructor(private readonly _object: T, private readonly _key: K) {} 
  36.   get value() { 
  37.     return this._object[this._key] 
  38.   } 
  39.   set value(newVal) { 
  40.     this._object[this._key] = newVal 
  41.   } 
  42. // 将reactive对象的所有属性变成ref类型 
  43. // const obj = toRefs(reactive({})) 
  44. export function toRefs<T extends object>(object: T): ToRefs<T> { 
  45.   if (__DEV__ && !isProxy(object)) { 
  46.     console.warn(`toRefs() expects a reactive object but received a plain one.`) 
  47.   } 
  48.   const ret: any = isArray(object) ? new Array(object.length) : {} 
  49.   for (const key in object) { 
  50.     ret[key] = toRef(object, key
  51.   } 
  52.   return ret 

effect

  • effect的源码非常具有跳跃性,需要多看上面的响应式原理架构图才能理解
  • watch\computed\render的时候都会创建effect,所以入口来源复杂,入参也复杂
  • reactive\ref\computed\watch\render\update访问都会级联触发该属性依赖收集track
  • reactive\ref\computed修改都会级联触发trigger执行该属性的副作用
  • effectStack 是当前待执行的effect栈
  • activeEffect 是全局正在触发的effect,每当一个effect触发新的effect入栈的时候activeEffect都会更新为新的,执行完毕后又从effectStack pop出前一个
  • 当调用watch(getter,scheduler,{onTrack,onTrigger})时,可以简单的理解为触发

 

  1. effect(getter, { 
  2.   lazy: true, // 非computed 
  3.   onTrack, 
  4.   onTrigger, 
  5.   scheduler 
  6. }) 

  1. export function effect<T = any>( 
  2.   fn: () => T, 
  3.   options: ReactiveEffectOptions = EMPTY_OBJ 
  4. ): ReactiveEffect<T> { 
  5.   if (isEffect(fn)) { 
  6.     fn = fn.raw 
  7.   } 
  8.   const effect = createReactiveEffect(fn, options) 
  9.   if (!options.lazy) { // computed属性懒执行,其他副作用执行触发依赖收集 
  10.     effect() 
  11.   } 
  12.   return effect 
  13. function createReactiveEffect<T = any>( 
  14.   fn: () => T, 
  15.   options: ReactiveEffectOptions 
  16. ): ReactiveEffect<T> { 
  17.   const effect = function reactiveEffect(): unknown { 
  18.     if (!effect.active) { 
  19.       return options.scheduler ? undefined : fn() 
  20.     } 
  21.     // effectStack 是当前有效的待执行effect栈 
  22.     if (!effectStack.includes(effect)) { 
  23.       cleanup(effect) // 可能有多个响应式属性都会触发该effect,但是该effect只会执行一次不会重复执行,所以从所有依赖属性的副作用数组中删除该effect 
  24.       try { 
  25.         enableTracking() // 只有副作用原函数fn()执行期间收集其依赖的响应式属性,执行完毕后不能再收集 
  26.         effectStack.push(effect) 
  27.         activeEffect = effect // 当前副作用为全局正在执行的副作用 
  28.         return fn() 
  29.       } finally { 
  30.         // 当前副作用依赖收集完成后退栈并不再触发依赖收集 
  31.         effectStack.pop()  
  32.         resetTracking() 
  33.         activeEffect = effectStack[effectStack.length - 1] 
  34.       } 
  35.     } 
  36.   } as ReactiveEffect 
  37.   effect.id = uid++ 
  38.   effect.allowRecurse = !!options.allowRecurse 
  39.   effect._isEffect = true 
  40.   effect.active = true 
  41.   effect.raw = fn // 存储原始副作用函数 
  42.   effect.deps = [] // 该副作用依赖的所有响应式属性 
  43.   effect.options = options 
  44.   return effect 
  45. // 可能有多个响应式属性都会触发该effect,但是该effect只会执行一次不会重复执行,所以从所有依赖属性的副作用数组中删除该effect 
  46. function cleanup(effect: ReactiveEffect) { 
  47.   const { deps } = effect 
  48.   if (deps.length) { 
  49.     for (let i = 0; i < deps.length; i++) { 
  50.       deps[i].delete(effect) 
  51.     } 
  52.     deps.length = 0 
  53.   } 
  1. export const enum TrackOpTypes { 
  2.   GET = 'get'
  3.   HAS = 'has'
  4.   ITERATE = 'iterate' 
  5. export const enum TriggerOpTypes { 
  6.   SET = 'set'
  7.   ADD = 'add'
  8.   DELETE = 'delete'
  9.   CLEAR = 'clear' 
  10. // 依赖收集副作用函数 
  11. export function track(target: object, type: TrackOpTypes, key: unknown) { 
  12.   if (!shouldTrack || activeEffect === undefined) { 
  13.     return 
  14.   } 
  15.   let depsMap = targetMap.get(target) // targetMap存储所有的proxy代理原target 
  16.   if (!depsMap) { 
  17.     targetMap.set(target, (depsMap = new Map())) 
  18.   } 
  19.   let dep = depsMap.get(key) // depsMap存储某个proxy代理原target里的所有属性 
  20.   if (!dep) { 
  21.     depsMap.set(key, (dep = new Set())) // dep存储某个proxy代理原target里的某个属性的所有副作用effect 
  22.   } 
  23.   if (!dep.has(activeEffect)) { 
  24.     dep.add(activeEffect) 
  25.     activeEffect.deps.push(dep) 
  26.     if (__DEV__ && activeEffect.options.onTrack) { 
  27.       // watch(key,()=>{},{onTrack}) 里的onTrack触发此处 
  28.       // watchEffect(()=>{},{onTrack}) 里的onTrack触发此处 
  29.       activeEffect.options.onTrack({ 
  30.         effect: activeEffect, 
  31.         target, 
  32.         type, 
  33.         key 
  34.       }) 
  35.     } 
  36.   } 
  37. // 依赖副作用触发函数 
  38. export function trigger
  39.   target: object, 
  40.   type: TriggerOpTypes, 
  41.   key?: unknown, 
  42.   newValue?: unknown, 
  43.   oldValue?: unknown, 
  44.   oldTarget?: Map<unknown, unknown> | Set<unknown> 
  45. ) { 
  46.   const depsMap = targetMap.get(target) 
  47.   if (!depsMap) { 
  48.     return 
  49.   } 
  50.   const effects = new Set<ReactiveEffect>() // 存储本次操作导致的需要执行的副作用集合 
  51.   const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => { 
  52.     if (effectsToAdd) { 
  53.       effectsToAdd.forEach(effect => { 
  54.         if (effect !== activeEffect || effect.allowRecurse) { 
  55.           effects.add(effect) 
  56.         } 
  57.       }) 
  58.     } 
  59.   } 
  60.  
  61.   if (type === TriggerOpTypes.CLEAR) { 
  62.     // 对某个数组或集合执行清空操作时,该数组的所有副作用都要添加到待执行数组中 
  63.     depsMap.forEach(add
  64.   } else if (key === 'length' && isArray(target)) { 
  65.     // 当访问数组length属性时只添加其相关的副作用到待执行数组中 
  66.     depsMap.forEach((dep, key) => { 
  67.       if (key === 'length' || key >= (newValue as number)) { 
  68.         add(dep) 
  69.       } 
  70.     }) 
  71.   } else { 
  72.     // schedule runs for SET | ADD | DELETE 
  73.     if (key !== void 0) { // void 0 === undefined 
  74.       add(depsMap.get(key)) 
  75.     } 
  76.  
  77.     // also run for iteration key on ADD | DELETE | Map.SET 
  78.     switch (type) { 
  79.       case TriggerOpTypes.ADD
  80.         if (!isArray(target)) { 
  81.           add(depsMap.get(ITERATE_KEY)) 
  82.           if (isMap(target)) { 
  83.             add(depsMap.get(MAP_KEY_ITERATE_KEY)) 
  84.           } 
  85.         } else if (isIntegerKey(key)) { 
  86.           // new index added to array -> length changes 
  87.           add(depsMap.get('length')) 
  88.         } 
  89.         break 
  90.       case TriggerOpTypes.DELETE
  91.         if (!isArray(target)) { 
  92.           add(depsMap.get(ITERATE_KEY)) 
  93.           if (isMap(target)) { 
  94.             add(depsMap.get(MAP_KEY_ITERATE_KEY)) 
  95.           } 
  96.         } 
  97.         break 
  98.       case TriggerOpTypes.SET
  99.         if (isMap(target)) { 
  100.           add(depsMap.get(ITERATE_KEY)) 
  101.         } 
  102.         break 
  103.     } 
  104.   } 
  105.   // 创建执行副作用的函数 
  106.   const run = (effect: ReactiveEffect) => { 
  107.     if (__DEV__ && effect.options.onTrigger) { 
  108.       effect.options.onTrigger({ 
  109.         effect, 
  110.         target, 
  111.         key
  112.         type, 
  113.         newValue, 
  114.         oldValue, 
  115.         oldTarget 
  116.       }) 
  117.     } 
  118.     if (effect.options.scheduler) { 
  119.       // scheduler 可以简单理解为watch(key,cb)的cb 
  120.       effect.options.scheduler(effect) 
  121.     } else { 
  122.       effect() 
  123.     } 
  124.   } 
  125.   effects.forEach(run) 

computed

  1. // 运用ts函数重载机制让ref有3种不同类型的入参、返回 
  2. export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T> 
  3. export function computed<T>( 
  4.   options: WritableComputedOptions<T> 
  5. ): WritableComputedRef<T> 
  6. export function computed<T>( 
  7.   getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T> 
  8. ) { 
  9.   let getter: ComputedGetter<T> 
  10.   let setter: ComputedSetter<T> 
  11.   if (isFunction(getterOrOptions)) { 
  12.     getter = getterOrOptions 
  13.     setter = __DEV__ 
  14.       ? () => { 
  15.           console.warn('Write operation failed: computed value is readonly'
  16.         } 
  17.       : NOOP 
  18.   } else { 
  19.     getter = getterOrOptions.get 
  20.     setter = getterOrOptions.set 
  21.   } 
  22.   return new ComputedRefImpl( 
  23.     getter, 
  24.     setter, 
  25.     isFunction(getterOrOptions) || !getterOrOptions.set // isReadonly 
  26.   ) as any 
  27. class ComputedRefImpl<T> { 
  28.   private _value!: T // 当前计算属性返回值 
  29.   private _dirty = true // 是否有依赖属性变化导致需要重新求值 
  30.   public readonly effect: ReactiveEffect<T> 
  31.   public readonly __v_isRef = true
  32.   public readonly [ReactiveFlags.IS_READONLY]: boolean //是否只读 
  33.   constructor( 
  34.     getter: ComputedGetter<T>, 
  35.     private readonly _setter: ComputedSetter<T>, 
  36.     isReadonly: boolean 
  37.   ) { 
  38.     this.effect = effect(getter, { 
  39.       lazy: true, // 初始化时不求值,触发get的时候才求值 
  40.       scheduler: () => { 
  41.         if (!this._dirty) {  
  42.           // 依赖属性发生变化,当前计算属性变脏了,在下次get访问时需要重新求值;触发依赖该计算属性的副作用执行 
  43.           this._dirty = true 
  44.           trigger(toRaw(this), TriggerOpTypes.SET'value'
  45.         } 
  46.       } 
  47.     }) 
  48.     this[ReactiveFlags.IS_READONLY] = isReadonly 
  49.   } 
  50.   get value() { 
  51.     if (this._dirty) { 
  52.       // 第一次访问或依赖属性发生变化才重新求值 
  53.       this._value = this.effect() 
  54.       this._dirty = false 
  55.     } 
  56.     track(toRaw(this), TrackOpTypes.GET, 'value'
  57.     return this._value 
  58.   } 
  59.   set value(newValue: T) { 
  60.     this._setter(newValue) 
  61.   } 

 

责任编辑:姜华 来源: 微医大前端技术
相关推荐

2021-09-22 07:57:23

Vue3 插件Vue应用

2022-01-19 18:05:47

Vue3前端代码

2021-12-02 05:50:35

Vue3 插件Vue应用

2022-06-26 00:00:02

Vue3响应式系统

2020-06-09 11:35:30

Vue 3响应式前端

2023-02-06 08:39:01

PreactVue3响应式

2016-11-03 13:19:38

vue.jsjavascript前端

2023-12-06 07:43:56

Vue如何定义事件

2019-07-01 13:34:22

vue系统数据

2021-01-22 11:47:27

Vue.js响应式代码

2022-12-06 08:39:27

Vue3Reactive

2021-11-26 05:59:31

Vue3 插件Vue应用

2021-03-22 10:05:25

开源技术 项目

2017-08-30 17:10:43

前端JavascriptVue.js

2022-01-26 11:00:58

源码层面Vue3

2020-09-17 07:08:04

TypescriptVue3前端

2021-12-01 08:11:44

Vue3 插件Vue应用

2024-04-10 08:45:51

Vue 3Proxy对象监测数据

2020-12-01 08:34:31

Vue3组件实践

2022-06-23 07:46:34

VueMobx系统
点赞
收藏

51CTO技术栈公众号