[vue3] Vue3源码阅读笔记 reactivity - baseHandlers

源码位置：https://github.com/vuejs/core/blob/main/packages/reactivity/src/baseHandlers.ts

baseHandler用于处理对象、数组类型的getter和setter。
这个文件中主要有两个函数，和三个类。
arrayInstrucmentations和hasOwnProperty这两个函数主要起到辅助作用；
3个类：

• BaseReactiveHandler：负责处理getter；
  
• MutableReactiveHandler和ReadonlyReactiveHandler：负责处理setter；
  

graph LR        A[ProxyHandler] --> B[BaseReactiveHandler]        B --> C[MutableReactiveHandler] & D[ReadonlyReactiveHandler]依赖

依赖比较零碎，大致分为以下几种：

• 用于判断数据类型；
  
• Vue内置的Flag或Type，用来标记对象或者操作的类型；
  
• 暂停与重置依赖追踪和任务调度的方法；
  
• 其它零碎的比如：
  
  
  
  • warning：在控制台输出警告信息；
    
  • makeMap：传入一个用,分隔的多个key组成的字符串，返回一个has函数用于检查后续传入的key是否存在于一开始传入的字符串中。
    
  
  

arrayInstrucmentations

arrayInstrumentations这个对象用于记录一些处理过的数组方法（拦截操作），通过createArrayInstrumentations构建后大概长这样：

1. {
2.     ...
3.     'push': function(this, ...args){...},
4.     'indexOf': function(this, ...args){...},
5.         ...
6. }

复制代码

拦截这些方法的原因：

• ['includes', 'indexOf', 'lastIndexOf']：数组中可能包含响应式对象，这几个方法是需要比较数组元素的，直接比较可能会出错，因此需要拦截这些方法，在比较的过程中考虑使用toRaw转成原始对象进行比较。
  
• ['push', 'pop', 'shift', 'unshift', 'splice']：这些方法会改变数组的长度length属性，从而触发与length属性相关的effect，而effect中如果又有这些方法，那么就会导致死循环。因此，这些方法需要被拦截做特殊处理，在执行这些方法的时候要暂停依赖的追踪和调度。
  

  相关的issue是：fix(reactivity): some mutation methods of Array cause infinite recursion by unbyte · Pull Request #2138 · vuejs/core (github.com)
  

  

  
  

  
  

源码与注释：

1. const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations()
3. function createArrayInstrumentations() {
4.   const instrumentations: Record<string, Function> = {}
6.   // 给需要处理可能包含响应式值的数组方法增加拦截逻辑
7.   ;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {
8.     instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
9.       // 将 this 转换为原始数组
10.       const arr = toRaw(this) as any
11.       
12.       // 追踪数组每个元素的 GET 操作
13.       for (let i = 0, l = this.length; i < l; i++) {
14.         track(arr, TrackOpTypes.GET, i + '')
15.       }
16.       
17.       // 先使用原始参数（可能是响应式的）运行原方法
18.       const res = arr[key](...args)
19.       
20.       // 如果结果是 -1 或 false，说明没有找到或不匹配，再次使用原始值运行一次
21.       if (res === -1 || res === false) {
22.         return arr[key](...args.map(toRaw))
23.       } else {
24.         return res
25.       }
26.     }
27.   })
29.   // 拦截会改变数组长度的方法，避免长度变化被追踪，从而防止出现无限循环的问题 (#2137)
30.   ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
31.     instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
32.       // 暂停追踪
33.       pauseTracking()
34.       // 暂停调度
35.       pauseScheduling()
36.       
37.       // 使用原始数组运行原方法
38.       const res = (toRaw(this) as any)[key].apply(this, args)
39.       
40.       // 重置调度
41.       resetScheduling()
42.       // 重置追踪
43.       resetTracking()
44.       
45.       return res
46.     }
47.   })
48.   
49.   return instrumentations
50. }

复制代码

hasOwnProperty

Vue对hasOwnProperty做了特殊处理，主要在于处理以下问题：

• 确保需要检查的key只能是Symbol类型或string类型，如果是其它，则通过String()转为字符串；
  
• 使用toRaw在原始对象上查询key是否存在；
  
• 使用track追踪key；
  

源码：

1. function hasOwnProperty(this: object, key: unknown) {
2.   // #10455 hasOwnProperty may be called with non-string values
3.   if (!isSymbol(key)) key = String(key)
4.   const obj = toRaw(this)
5.   track(obj, TrackOpTypes.HAS, key)
6.   return obj.hasOwnProperty(key as string)
7. }

复制代码

BaseReactiveHandler

这个类主要负责配置getter，当reactiveAPI包装的响应式对象的某个key被读取时，会触发这里的getter：

• 如果读取的key是内置的ReactiveFlags，返回相应的值；
  
• 如果target是一个数组，那么需要应用上述arrayInstrucmentations记录的处理过的数组；
  
• 如果key是hasOwnProperty，返回上述特殊处理过的hasOwnProperty；
  
• 对key记录依赖。
  

1. class BaseReactiveHandler implements ProxyHandler<Target> {
2.   constructor(
3.     protected readonly _isReadonly = false, // 是否只读
4.     protected readonly _isShallow = false, // 是否浅层响应式
5.   ) {}
7.   get(target: Target, key: string | symbol, receiver: object) {
8.     const isReadonly = this._isReadonly,
9.       isShallow = this._isShallow
11.     // 处理 ReactiveFlags 特殊标志
12.     if (key === ReactiveFlags.IS_REACTIVE) {
13.       // 判断目标是否是响应式的
14.       return !isReadonly
15.     } else if (key === ReactiveFlags.IS_READONLY) {
16.       // 判断目标是否是只读的
17.       return isReadonly
18.     } else if (key === ReactiveFlags.IS_SHALLOW) {
19.       // 判断目标是否是浅层响应的
20.       return isShallow
21.     } else if (key === ReactiveFlags.RAW) {
22.       // 处理 RAW 标志
23.       if (
24.         receiver ===
25.           (isReadonly
26.             ? isShallow
27.               ? shallowReadonlyMap
28.               : readonlyMap
29.             : isShallow
30.               ? shallowReactiveMap
31.               : reactiveMap
32.           ).get(target) ||
33.         // receiver 不是响应式代理，但具有相同的原型
34.         // 这意味着 receiver 是响应式代理的用户代理
35.         Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)
36.       ) {
37.         return target
38.       }
39.       // 提前返回 undefined
40.       return
41.     }
43.     const targetIsArray = isArray(target)
45.     // 处理非只读的情况
46.     if (!isReadonly) {
47.       if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
48.         // 对于数组的特殊方法，使用上述的方法拦截处理
49.         return Reflect.get(arrayInstrumentations, key, receiver)
50.       }
51.       if (key === 'hasOwnProperty') {
52.         // 特殊处理 hasOwnProperty 方法
53.         return hasOwnProperty
54.       }
55.     }
57.     // 默认的 Reflect.get 操作
58.     const res = Reflect.get(target, key, receiver)
60.     // 处理内置符号和非可追踪的键
61.     if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
62.       return res
63.     }
65.     // 处理非只读情况，执行追踪操作
66.     if (!isReadonly) {
67.       track(target, TrackOpTypes.GET, key)
68.     }
70.     // 处理浅层响应情况
71.     if (isShallow) {
72.       return res
73.     }
75.     // 处理 Ref 类型的值
76.     if (isRef(res)) {
77.       // 如果是数组并且键是整数，则跳过 unwrap
78.       return targetIsArray && isIntegerKey(key) ? res : res.value
79.     }
81.     // 处理对象类型的值，将返回的值转化为代理对象
82.     if (isObject(res)) {
83.       // 将返回的值转换为代理对象，避免循环依赖
84.       return isReadonly ? readonly(res) : reactive(res)
85.     }
87.     return res
88.   }
89. }

复制代码

MutableReactiveHandler

这个类实现了对set、deleteProperty、has、ownKeys的拦截

1. class MutableReactiveHandler extends BaseReactiveHandler {
2.   constructor(isShallow = false) {
3.     super(false, isShallow) // 调用父类构造函数，设置只读标志为 false
4.   }
6.   set(
7.     target: object,
8.     key: string | symbol,
9.     value: unknown,
10.     receiver: object,
11.   ): boolean {
12.     let oldValue = (target as any)[key] // 获取目标对象中原有的值
13.     if (!this._isShallow) {
14.       // 如果不是浅层响应，进行深层处理
15.       const isOldValueReadonly = isReadonly(oldValue) // 判断原有值是否是只读的
16.       if (!isShallow(value) && !isReadonly(value)) {
17.         oldValue = toRaw(oldValue) // 获取原有值的原始对象
18.         value = toRaw(value) // 获取新值的原始对象
19.       }
20.       // 如果原有值是 ref 类型并且新值不是 ref 类型
21.       if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
22.         if (isOldValueReadonly) {
23.           // 如果原有值是只读的，返回 false
24.           return false
25.         } else {
26.           oldValue.value = value // 更新 ref 的值
27.           return true
28.         }
29.       }
30.     } else {
31.       // 在浅层模式中，直接设置对象，不考虑其是否为响应式
32.     }
34.     // 判断目标对象是否之前已经有这个键
35.     const hadKey =
36.       isArray(target) && isIntegerKey(key)
37.         ? Number(key) < target.length
38.         : hasOwn(target, key)
39.     const result = Reflect.set(target, key, value, receiver) // 使用 Reflect 设置值
40.     // 判断target是否是实际被修改的对象
41.     if (target === toRaw(receiver)) {
42.       if (!hadKey) {
43.         // 如果之前没有这个键，触发 ADD 操作
44.         trigger(target, TriggerOpTypes.ADD, key, value)
45.       } else if (hasChanged(value, oldValue)) {
46.         // 如果键已经存在且新值不同，触发 SET 操作
47.         trigger(target, TriggerOpTypes.SET, key, value, oldValue)
48.       }
49.     }
50.     return result
51.   }
53.   deleteProperty(target: object, key: string | symbol): boolean {
54.     const hadKey = hasOwn(target, key) // 判断目标对象是否有这个键
55.     const oldValue = (target as any)[key] // 获取原有值
56.     const result = Reflect.deleteProperty(target, key) // 使用 Reflect 删除属性
57.     if (result && hadKey) {
58.       // 如果删除成功且目标对象之前有这个键，触发 DELETE 操作
59.       trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
60.     }
61.     return result
62.   }
64.   has(target: object, key: string | symbol): boolean {
65.     const result = Reflect.has(target, key) // 使用 Reflect 检查是否存在该键
66.     if (!isSymbol(key) || !builtInSymbols.has(key)) {
67.       // 如果键不是内置符号，追踪 HAS 操作
68.       track(target, TrackOpTypes.HAS, key)
69.     }
70.     return result
71.   }
73.   ownKeys(target: object): (string | symbol)[] {
74.     // 追踪 ITERATE 操作，用于获取对象的所有键
75.     track(
76.       target,
77.       TrackOpTypes.ITERATE,
78.       isArray(target) ? 'length' : ITERATE_KEY,
79.     )
80.     return Reflect.ownKeys(target) // 使用 Reflect 获取对象的所有键
81.   }
82. }

复制代码

解析：set里的trigger时机：

1. // 判断target是否是实际被修改的对象
2. if (target === toRaw(receiver)) {
3.   if (!hadKey) {
4.     // 如果之前没有这个键，触发 ADD 操作
5.     trigger(target, TriggerOpTypes.ADD, key, value)
6.   } else if (hasChanged(value, oldValue)) {
7.     // 如果键已经存在且新值不同，触发 SET 操作
8.     trigger(target, TriggerOpTypes.SET, key, value, oldValue)
9.   }
10. }

复制代码

如果target !== toRaw(receiver)说明此时不是在对象上修改它本身的属性，而是通过原型链上的其它对象。这种情况不会触发更新。
ReadonlyReactiveHandler

这个类比较简单，主要是拦截set和deleteProperty这两个会改变对象的操作。
开发模式下会在控制台输出警告。
注意set和deleteProperty操作会返回true，这是为了符合Proxy规范：即使某些操作被拦截并不实际改变对象的状态，仍然需要返回一个布尔值以指示操作的成功或失败。

1. class ReadonlyReactiveHandler extends BaseReactiveHandler {
2.   constructor(isShallow = false) {
3.     super(true, isShallow) // 调用父类构造函数，将 isReadonly 设置为 true，表示对象是只读的
4.   }
6.   set(target: object, key: string | symbol, value: unknown): boolean {
7.     if (__DEV__) {
8.       warn(
9.         `Set operation on key "${String(key)}" failed: target is readonly.`,
10.         target,
11.       )
12.     }
13.     return true // 返回 true，表示设置操作被忽略
14.   }
16.   deleteProperty(target: object, key: string | symbol): boolean {
17.     if (__DEV__) {
18.       warn(
19.         `Delete operation on key "${String(key)}" failed: target is readonly.`,
20.         target,
21.       )
22.     }
23.     return true // 返回 true，表示删除操作被忽略
24.   }
25. }

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！