关于vue.js:听说你很了解-Vue3-响应式

<< 舒适揭示 >> 本文内容偏干，倡议边喝水边食用，如有不适请及时点赞！

【A】：能不能说说 Vue3 响应式都解决了哪些数据类型？都怎么解决的呀？

【B】：能，只能说一点点...

【A】：...

只有问到 Vue 相干的内容，仿佛总绕不过 响应式原理 的话题，随之而来的答复必然是围绕着 Object.defineProperty 和 Proxy 来开展（即 Vue2 和 Vue3），但若持续诘问某些具体实现是不是就仓促完结答复了（ ~~你跑我追，你不跑我还追~~）。

本文就不再过多介绍 Vue2 中响应式的解决，感兴趣能够参考 从 vue 源码看问题 —— 如何了解 Vue 响应式？，然而会有简略提及，上面就来看看 Vue3 中是如何解决 原始值、Object、Array、Set、Map 等数据类型的响应式。

从 `Object.defineProperty` 到 `Proxy`

所有的所有还得从 Object.defineProperty 开始讲起，那是一个不一样的 API …（~~bgm 响起，自行领会~~）

Object.defineProperty(obj, prop, descriptor) 办法会间接在一个对象上定义一个 新属性 ，或批改一个对象的 现有属性，并返回此对象，其参数具体为：

obj：要定义属性的对象
prop：要定义或批改的 属性名称 或 Symbol
descriptor：要定义或批改的 属性描述符

从以上的形容就能够看出一些限度，比方：

指标是 对象属性 ，不是 整个对象
一次只能 定义或批改一个属性
- 当然有对应的一次解决多个属性的办法 Object.defineProperties()，但在 vue 中并不实用，因为 vue 不能提前晓得用户传入的对象都有什么属性，因而还是得通过相似 Object.keys() + for 循环的形式获取所有的 key -> value，而这其实是没有必要应用 Object.defineProperties()

Object.defineProperty() 理论是通过定义或批改 对象属性 的描述符来实现 数据劫持，其对应的毛病也是没法被疏忽的：

只能拦挡对象属性的 get 和 set 操作，比方无奈拦挡 delete、in、办法调用 等操作
动静增加新属性（响应式失落）
- 保障后续应用的属性要在初始化申明 data 时进行定义
- 应用 this.$set() 设置新属性
通过 delete 删除属性（响应式失落）
- 应用 this.$delete() 删除属性
应用数组索引 替换 / 新增 元素（响应式失落）
- 应用 this.$set() 设置新元素
应用数组 push、pop、shift、unshift、splice、sort、reverse 等 原生办法 扭转原数组时（响应式失落）
- 应用 重写 / 加强 后的 push、pop、shift、unshift、splice、sort、reverse 办法
一次只能对一个属性实现 数据劫持，须要遍历对所有属性进行劫持
数据结构简单时（属性值为 援用类型数据 ），须要通过递归进行解决

它们有啥关系，其实没有啥关系，只是大家习惯性的会答复 Object.defineProperty 不能拦挡 Array 的操作，这句话说得对但也不对。

应用 Object.defineProperty 拦挡 Array

Object.defineProperty 可用于实现对象属性的 get 和 set 拦挡，而数组其实也是对象，那天然是能够实现对应的拦挡操作，如下：

Vue2 为什么不应用 Object.defineProperty 拦挡 Array？

尤大在曾在 GitHub 的 Issue 中做过如下回复：

说实话性能问题到底指的是什么呢？上面是总结了一些目前看到过的答复：

数组和一般对象在应用场景下有区别 ，在我的项目中应用数组的目标大多是为了遍历，即比拟少会应用 array[index] = xxx 的模式，更多的是应用数组的 Api 的形式
数组长度是多变的，不可能像一般对象一样先在 data 选项中提前申明好所有元素，比方通过 array[index] = xxx 形式赋值时，一旦 index 的值超过了现有的最大索引值，那么以后的增加的新元素也不会具备响应式
数组存储的元素比拟多，不可能为每个数组元素都设置 getter/setter
无奈拦挡数组原生办法如 push、pop、shift、unshift 等的调用 ，最终仍需 重写 / 加强 原生办法

因为在 Vue2 中应用 Object.defineProperty 带来的缺点，导致在 Vue2 中不得不提供了一些额定的办法（如：Vue.set、Vue.delete()）解决问题，而在 Vue3 中应用了 Proxy 的形式来实现 数据劫持，而上述的问题在 Proxy 中都能够失去解决。

Proxy 次要用于创立一个 对象的代理 ，从而实现基本操作的拦挡和自定义（如属性查找、赋值、枚举、函数调用等），实质上是通过拦挡对象 外部办法 的执行实现代理，而对象自身依据标准定义的不同又会辨别为 惯例对象 和 异质对象（这不是重点，可自行理解）。

new Proxy(target, handler) 是针对整个对象进行的代理，不是某个属性
代理对象属性领有 读取、批改、删除、新增、是否存在属性 等操作相应的捕获器， 更多可见
- get() 属性读取操作的捕获器
- set() 属性设置操作的捕获器
- deleteProperty() 是 delete 操作符的捕获器
- ownKeys() 是 Object.getOwnPropertyNames 办法和 Object.getOwnPropertySymbols 办法的捕获器
- has() 是 in 操作符的捕获器

Reflect 是一个内置的对象，它提供拦挡 JavaScript 操作的办法，这些办法与 Proxy handlers“) 提供的的办法是一一对应的，且 Reflect 不是一个函数对象，即不能进行实例化，其所有属性和办法都是动态的。

Reflect.get(target, propertyKey[, receiver]) 获取对象身上某个属性的值，相似于 target[name]
Reflect.set(target, propertyKey, value[, receiver]) 将值调配给属性的函数。返回一个Boolean，如果更新胜利，则返回true
Reflect.deleteProperty(target, propertyKey) 作为函数的 delete 操作符，相当于执行 delete target[name]
Reflect.ownKeys(target) 返回一个蕴含所有本身属性（不蕴含继承属性）的数组。(相似于 Object.keys(), 但不会受enumerable 影响)
Reflect.has(target, propertyKey) 判断一个对象是否存在某个属性，和 in 运算符的性能完全相同

更多办法点此可见

在 Proxy 的 get(target, key, receiver)、set(target, key, newVal, receiver) 的捕捉器中都能接到后面所列举的参数：

target 指的是 原始数据对象
key 指的是以后操作的 属性名
newVal 指的是以后操作接管到的 最新值
receiver 指向的是以后操作 正确的上下文

怎么了解 `Proxy handler` 中 `receiver` 指向的是以后操作正确上的下文呢？

失常状况下，receiver 指向的是 以后的代理对象
非凡状况下，receiver 指向的是 引发以后操作的对象
- 通过 Object.setPrototypeOf() 办法将代理对象 proxy 设置为一般对象 obj 的原型
- 通过 obj.name 拜访其不存在的 name 属性，因为原型链的存在，最终会拜访到 proxy.name 上，即触发 get 捕捉器

在 Reflect 的办法中通常只须要传递 target、key、newVal 等，但为了可能解决上述提到的非凡状况，个别也须要传递 receiver 参数，因为 Reflect 办法中传递的 receiver 参数代表执行原始操作时的 this 指向，比方：Reflect.get(target, key , receiver)、Reflect.set(target, key, newVal, receiver)。

总结：Reflect 是为了在执行对应的拦挡操作的办法时能 传递正确的 this 上下文。

Vue3 中提供了 reactive() 和 ref() 两个办法用来将 指标数据 变成 响应式数据 ，而通过 Proxy 来实现 数据劫持（或代理） 的具体实现就在其中，上面一起来看看吧！

从源码来看，其外围其实就是 createReactiveObject(...) 函数，那么持续往下查看对应的内容

源码地位：packages\reactivity\src\reactive.ts

export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  // 若指标对象是响应式的只读数据，则间接返回
  if (isReadonly(target)) {return target}

  // 否则将指标数据尝试变成响应式数据
  return createReactiveObject(
    target,
    false,
    mutableHandlers, // 对象类型的 handlers
    mutableCollectionHandlers, // 汇合类型的 handlers
    reactiveMap
  )
}

源码的体现也是非常简单，无非就是做一些前置判断解决：

若指标数据是 原始值类型 ，间接向返回 原数据
若指标数据的 __v_raw 属性为 true，且是【非响应式数据】或不是通过调用 readonly() 办法，则间接返回 原数据
若指标数据已存在相应的 proxy 代理对象，则间接返回 对应的代理对象
若指标数据不存在对应的 白名单数据类型 中，则间接返回原数据，反对响应式的数据类型如下：
- 可扩大的对象，即是否能够在它下面增加新的属性
- __v_skip 属性不存在或值为 false 的对象
- 数据类型为 Object、Array、Map、Set、WeakMap、WeakSet 的对象
- 其余数据都对立被认为是 有效的响应式数据对象
通过 Proxy 创立代理对象，依据指标数据类型抉择不同的 Proxy handlers

看来具体的实现又在不同数据类型的 捕捉器 中，即上面源码的 collectionHandlers 和 baseHandlers ，而它们则对应的是在上述 reactive() 函数中为 createReactiveObject() 函数传递的 mutableCollectionHandlers 和 mutableHandlers 参数。

源码地位：packages\reactivity\src\reactive.ts

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {

  // 非对象类型间接返回
  if (!isObject(target)) {if (__DEV__) {console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }

  // 指标数据的 __v_raw 属性若为 true，且是【非响应式数据】或 不是通过调用 readonly() 办法，则间接返回
  if (target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {return target}

  // 指标对象已存在相应的 proxy 代理对象，则间接返回
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {return existingProxy}

  // 只有在白名单中的值类型才能够被代理监测，否则间接返回
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {return target}

  // 创立代理对象
  const proxy = new Proxy(
    target,
    // 若指标对象是汇合类型（Set、Map）则应用汇合类型对应的捕捉器，否则应用根底捕捉器
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers 
  )

  // 将对应的代理对象存储在 proxyMap 中
  proxyMap.set(target, proxy)

  return proxy
}

对象类型的捕捉器 — `mutableHandlers`

这里的对象类型指的是数组和 一般对象

源码地位：packages\reactivity\src\baseHandlers.ts

export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}

以上这些捕捉器其实就是咱们在上述 Proxy 局部列举进去的捕捉器，显然能够拦挡对一般对象的如下操作：

读取，如 obj.name
设置，如 obj.name = 'zs'
删除属性，如 delete obj.name
判断是否存在对应属性，如 name in obj
获取对象本身的属性值，如 obj.getOwnPropertyNames() 和 obj.getOwnPropertySymbols()

`get` 捕捉器

具体信息在上面的正文中，这里只列举核心内容：

若以后数据对象是数组，则 重写 / 加强 数组对应的办法
- 数组元素的 查找办法：includes、indexOf、lastIndexOf
- 批改原数组 的办法：push、pop、unshift、shift、splice
若以后数据对象是 一般对象 ，且非只读的则通过 track(target, TrackOpTypes.GET, key) 进行 依赖收集
- 若以后数据对象是 浅层响应 的，则间接返回其对应属性值
- 若以后数据对象是 ref 类型的，则会进行 主动脱 ref

若以后数据对象的属性值是 对象类型

若以后属性值属于 只读的，则通过 readonly(res) 向外返回其后果
否则会将以后属性值以 reactive(res) 向外返回 proxy 代理对象

否则间接向外返回对应的 属性值

function createGetter(isReadonly = false, shallow = false) {return function get(target: Target, key: string | symbol, receiver: object) {
  // 当间接通过指定 key 拜访 vue 内置自定义的对象属性时，返回其对应的值
  if (key === ReactiveFlags.IS_REACTIVE) {return !isReadonly} else if (key === ReactiveFlags.IS_READONLY) {return isReadonly} else if (key === ReactiveFlags.IS_SHALLOW) {return shallow} else if (
    key === ReactiveFlags.RAW &&
    receiver ===
      (isReadonly
        ? shallow
          ? shallowReadonlyMap
          : readonlyMap
        : shallow
        ? shallowReactiveMap
        : reactiveMap
      ).get(target)
  ) {return target}

  // 判断是否为数组类型
  const targetIsArray = isArray(target)

  // 数组对象
  if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
    // 重写 / 加强数组的办法：//  - 查找办法：includes、indexOf、lastIndexOf
    //  - 批改原数组的办法：push、pop、unshift、shift、splice
    return Reflect.get(arrayInstrumentations, key, receiver)
  }

  // 获取对应属性值
  const res = Reflect.get(target, key, receiver)

  if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {return res}

  // 依赖收集
  if (!isReadonly) {track(target, TrackOpTypes.GET, key)
  }

  // 浅层响应
  if (shallow) {return res}

  // 若是 ref 类型响应式数据，会进行【主动脱 ref】，但不反对【数组】+【索引】的拜访形式
  if (isRef(res)) {const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
    return shouldUnwrap ? res.value : res
  }

  // 属性值是对象类型：//  - 是只读属性，则通过 readonly() 返回后果，//  - 且是非只读属性，则递归调用 reactive 向外返回 proxy 代理对象
  if (isObject(res)) {return isReadonly ? readonly(res) : reactive(res)
  }

  return res
}
}

`set` 捕捉器

除去额定的边界解决，其实外围还是 更新属性值，并通过 trigger(...) 触发依赖更新

function createSetter(shallow = false) {
return function set(
  target: object,
  key: string | symbol,
  value: unknown,
  receiver: object
): boolean {
  // 保留旧的数据
  let oldValue = (target as any)[key]

  // 若原数据值属于 只读 且 ref 类型，并且新数据值不属于 ref 类型，则意味着批改失败
  if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {return false}

  if (!shallow && !isReadonly(value)) {if (!isShallow(value)) {value = toRaw(value)
      oldValue = toRaw(oldValue)
    }
    if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
      oldValue.value = value
      return true
    }
  } else {// in shallow mode, objects are set as-is regardless of reactive or not}

  // 是否存在对应的 key
  const hadKey =
    isArray(target) && isIntegerKey(key)
      ? Number(key) < target.length
      : hasOwn(target, key)

  // 设置对应值
  const result = Reflect.set(target, key, value, receiver)

  // 若指标对象是原始原型链上的内容（非自定义增加），则不触发依赖更新
  if (target === toRaw(receiver)) {if (!hadKey) {
      // 指标对象不存在对应的 key，则为新增操作
      trigger(target, TriggerOpTypes.ADD, key, value)
    } else if (hasChanged(value, oldValue)) {
      // 指标对象存在对应的值，则为批改操作
      trigger(target, TriggerOpTypes.SET, key, value, oldValue)
    }
  }

  // 返回批改后果
  return result
}
}

`deleteProperty` & `has` & `ownKeys` 捕捉器

这三个捕捉器内容十分简洁，其中 has 和 ownKeys 实质也属于 读取操作，因而须要通过 track() 进行依赖收集，而 deleteProperty 相当于批改操作，因而须要 trigger() 触发更新

function deleteProperty(target: object, key: string | symbol): boolean {const hadKey = hasOwn(target, key)
  const oldValue = (target as any)[key]
  const result = Reflect.deleteProperty(target, key)
  // 指标对象上存在对应的 key，并且能胜利删除，才会触发依赖更新
  if (result && hadKey) {trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}

function has(target: object, key: string | symbol): boolean {const result = Reflect.has(target, key)
  if (!isSymbol(key) || !builtInSymbols.has(key)) {track(target, TrackOpTypes.HAS, key)
  }
  return result
}

function ownKeys(target: object): (string | symbol)[] {track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
  return Reflect.ownKeys(target)
}

数组类型捕捉器 —— `arrayInstrumentations`

数组类型 和 对象类型 的大部分操作是能够共用的，比方 obj.name 和 arr[index] 等，但数组类型的操作还是会比对象类型更丰盛一些，而这些就须要非凡解决。

源码地位：packages\reactivity\src\collectionHandlers.ts

解决数组索引 `index` 和 `length`

数组的 index 和 length 是会相互影响的，比方存在数组 const arr = [1]：

arr[1] = 2 的操作会隐式批改 length 的属性值
arr.length = 0 的操作会导致原索引位的值产生变更

为了可能正当触发和 length 相干副作用函数的执行，在 set() 捕捉器中会判断以后操作的类型：

当 Number(key) < target.length 证实是批改操作，对应 TriggerOpTypes.SET 类型，即以后操作不会扭转 length 的值，不须要 触发和 length 相干副作用函数的执行
当 Number(key) >= target.length 证实是新增操作，TriggerOpTypes.ADD 类型，即以后操作会扭转 length 的值，须要触发和 length 相干副作用函数的执行

function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
  
   省略其余代码
   
    const hadKey =
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : hasOwn(target, key)
        
    const result = Reflect.set(target, key, value, receiver)
    // don't trigger if target is something up in the prototype chain of original
    
    if (target === toRaw(receiver)) {if (!hadKey) {trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

解决数组的查找办法

数组的查找办法包含 includes、indexOf、lastIndexOf，这些办法通常状况下是可能按预期进行工作，但还是须要对某些非凡状况进行解决：

当查找的指标数据是响应式数据自身时，失去的就不是预期后果
```
const obj = {}
const proxy = reactive([obj])
console.log(proxy.includs(proxy[0])) // false
```
- 【产生起因 】首先这里波及到了两次读取操作， 第一次 是 proxy[0] 此时会触发 get 捕捉器并为 obj 生成对应代理对象并返回， 第二次 是 proxy.includs() 的调用，它会遍历数组的每个元素，即会触发 get 捕捉器，并又生成一个新的代理对象并返回，而这两次生成的代理对象不是同一个，因而返回 false
- 【解决方案】源码中会在 get 中设置一个名为 proxyMap 的 WeakMap 汇合用于存储每个响应式对象，在触发 get 时优先返回 proxyMap 存在的响应式对象，这样不论触发多少次 get 都能返回雷同的响应式数据
当在响应式对象中查找原始数据时，失去的就不是预期后果
```
const obj = {}
const proxy = reactive([obj])
console.log(proxy.includs(obj)) // false
```
- 【产生起因 】proxy.includes() 会触发 get 捕捉器并为 obj 生成对应代理对象并返回，而 includes 办法的参数传递的是 原始数据 ，相当于此时是 响应式对象 和 原始数据对象 进行比拟，因而对应的后果肯定是为 false
- 【解决方案 】外围就是将它们的数据类型对立，即对立都应用 原始值数据比照 或 响应式数据比照，因为 includes() 的办法自身并不反对对传入参数或外部响应式数据的解决，因而须要自定义以上对应的数组查找办法
  - 在重写 / 加强的 includes、indexOf、lastIndexOf 等办法中，会将以后办法外部拜访到的响应式数据转换为原始数据，而后调用数组对应的原始办法进行查找，若查找后果为 true 则间接返回后果
  - 若以上操作没有查找到，则通过将以后办法传入的参数转换为原始数据，在调用数组的原始办法，此时间接将对应的后果向外进行返回

源码地位：packages\reactivity\src\baseHandlers.ts

;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
      // 内部调用上述办法，默认其内的 this 指向的是代理数组对象，// 但实际上是须要通过原始数组中进行遍历查找
      const arr = toRaw(this) as any
      for (let i = 0, l = this.length; i < l; i++) {track(arr, TrackOpTypes.GET, i + '')
      }
      // we run the method using the original args first (which may be reactive)
      const res = arr[key](...args)
      if (res === -1 || res === false) {
        // if that didn't work, run it again using raw values.
        return arr[key](...args.map(toRaw))
      } else {return res}
    }
  })

解决数组影响 `length` 的办法

隐式批改数组长度的原型办法包含 push、pop、shift、unshift、splice 等，在调用这些办法的同时会间接的读取数组的 length 属性，又因为这些办法具备批改数组长度的能力，即相当于 length 的设置操作，若不进行非凡解决，会导致与 length 属性相干的副作用函数被反复执行，即 栈溢出，比方：

const proxy = reactive([])

// 第一个副作用函数
effect(() => {proxy.push(1) // 读取 + 设置 操作
})

// 第二个副作用函数
effect(() => {proxy.push(2) // 读取 + 设置 操作（此时进行 trigger 时，会触发包含第一个副作用函数的内容，而后循环导致栈溢出）})

在源码中还是通过 重写 / 加强 上述对应数组办法的模式实现自定义的逻辑解决：

在调用真正的数组原型办法前，会通过设置 pauseTracking() 办法来禁止 track 依赖收集
在调用数组原生办法后，在通过 resetTracking() 办法复原 track 进行依赖收集
实际上以上的两个办法就是通过管制 shouldTrack 变量为 true 或 false，使得在 track 函数执行时是否要执行原来的依赖收集逻辑

源码地位：packages\reactivity\src\baseHandlers.ts

;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {instrumentations[key] = function (this: unknown[], ...args: unknown[]) {pauseTracking()
      const res = (toRaw(this) as any)[key].apply(this, args)
      resetTracking()
      return res
    }
  })

汇合类型的捕捉器 — `mutableCollectionHandlers`

汇合类型 包含 Map、WeakMap、Set、WeakSet 等，而对 汇合类型 的 代理模式 和 对象类型 须要有所不同，因为 汇合类型 和 对象类型 的操作方法是不同的，比方：

Map 类型 的原型属性和办法如下， 详情可见：

size
clear()
delete(key)
has(key)
get(key)
set(key)
keys()
values()
entries()
forEach(cb)

Set 类型 的原型属性和办法如下， 详情可见：

size
add(value)
clear()
delete(value)
has(value)
keys()
values()
entries()
forEach(cb)

源码地位：packages\reactivity\src\collectionHandlers.ts

解决 `代理对象` 无法访问 `汇合类型` 对应的 `属性` 和 `办法`

代理汇合类型的第一个问题，就是代理对象没法获取到汇合类型的属性和办法，比方：

从报错信息能够看出 size 属性是一个拜访器属性，所以它被作为办法调用了，而次要谬误起因就是在这个拜访器中的 this 指向的是 代理对象 ，在源码中就是通过为这些特定的属性和办法定义对应的 key 的 mutableInstrumentations 对象，并且在其对应的属性和办法中将 this 指向为 原对象.

function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {const target = (this as any)[ReactiveFlags.RAW]
  const rawTarget = toRaw(target)
  const rawKey = toRaw(key)
  if (key !== rawKey) {!isReadonly && track(rawTarget, TrackOpTypes.HAS, key)
  }
  !isReadonly && track(rawTarget, TrackOpTypes.HAS, rawKey)
  return key === rawKey
    ? target.has(key)
    : target.has(key) || target.has(rawKey)
}

function size(target: IterableCollections, isReadonly = false) {target = (target as any)[ReactiveFlags.RAW]
  !isReadonly && track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY)
  return Reflect.get(target, 'size', target)
}

省略其余代码

解决汇合类型的响应式

汇合建设响应式外围还是 track 和 trigger，转而思考的问题就变成，什么时候须要 track、什么时候须要 trigger:

track 机会：get()、get size()、has()、forEach()
trigger 机会：add()、set()、delete()、clear()

这里波及一些优化的内容，比方：

在 add() 中通过 has() 判断以后增加的元素是否曾经存在于 Set 汇合中时，若已存在就不须要进行 trigger() 操作，因为 Set 汇合自身的一个个性就是去重
在 delete() 中通过 has() 判断以后删除的元素或属性是否存在，若不存在就不须要进行 trigger() 操作，因为此时的删除操作是 有效的

function createInstrumentations() {
  const mutableInstrumentations: Record<string, Function> = {get(this: MapTypes, key: unknown) {// track
      return get(this, key)
    },
    get size() {// track
      return size(this as unknown as IterableCollections)
    },
    has,// track
    add,// trigger
    set,// trigger
    delete: deleteEntry,// trigger
    clear,// trigger
    forEach: createForEach(false, false) // track
  }
  省略其余代码
}

防止净化原始数据

通过重写汇合类型的办法并手动指定其中的 this 指向为 原始对象 的形式，解决 代理对象 无法访问 汇合类型 对应的属性和办法的问题，但这样的实现形式也带来了另一个问题： 原始数据被净化。

简略来说，咱们只心愿 代理对象（响应式对象 ） 才具备 依赖收集 (track) 和 依赖更新 (trigger) 的能力，而通过 原始数据 进行的操作不应该具备响应式的能力。

如果只是单纯的把所有操作间接作用到 原始对象 上就不能保障这个后果，比方：

 // 原数数据 originalData1
  const originalData1 = new Map({});
  // 代理对象 proxyData1
  const proxyData1 = reactive(originalData1);

  // 另一个代理对象 proxyData2
  const proxyData2 = reactive(new Map({}));

  // 将 proxyData2 做为 proxyData1 一个键值
  //【留神】此时的 set() 通过重写，其外部 this 曾经指向 原始对象（originalData1），等价于 原始对象 originalData1 上存储了一个 响应式对象 proxyData2
  proxyData1.set("proxyData2", proxyData2);

  // 若不做额定解决，如下基于 原始数据的操作 就会触发 track 和 trigger
  originalData1.get("proxyData2").set("name", "zs");

在源码中的解决方案也是很简略，间接通过 value = toRaw(value) 获取以后设置值对应的 原始数据 ，这样旧能够防止 响应式数据对原始数据的净化。

解决 `forEach` 回调参数

首先 Map.prototype.forEach(callbackFn [, thisArg]) 其中 callbackFn 回调函数会接管三个参数：

以后的 值 value
以后的 键 key
正在被遍历的 Map 对象（原始对象）

遍历操作 等价于 读取操作 ，在解决 一般对象 的 get() 捕捉器中有一个解决，如果以后拜访的属性值是 对象类型 那么就会向外返回其对应的 代理对象 ，目标是实现 惰性响应 和 深层响应 ，这个解决也同样实用于 汇合类型。

因而，在源码中通过 callback.call(thisArg, wrap(value), wrap(key), observed) 的形式将 Map 类型的键和值进行响应式解决，以及进行 track 操作，因为 Map 类型关注的就是键和值。

function createForEach(isReadonly: boolean, isShallow: boolean) {
  return function forEach(
    this: IterableCollections,
    callback: Function,
    thisArg?: unknown
  ) {
    const observed = this as any
    const target = observed[ReactiveFlags.RAW]
    const rawTarget = toRaw(target)
    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
    !isReadonly && track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY)
    return target.forEach((value: unknown, key: unknown) => {
      // important: make sure the callback is
      // 1. invoked with the reactive map as `this` and 3rd arg
      // 2. the value received should be a corresponding reactive/readonly.
      return callback.call(thisArg, wrap(value), wrap(key), observed)
    })
  }

解决迭代器

汇合类型的迭代器办法：

entries()
keys()
values()

Map 和 Set 都实现了 可迭代协定 （即 Symbol.iterator 办法，而 迭代器协定 是指一个对象实现了 next 办法），因而它们还能够通过 for...of 的形式进行遍历。

依据对 forEach 的解决，不难晓得波及遍历的办法，究竟还是得将其对应的遍历的 键、值 进行响应式包裹的解决，以及进行 track 操作，而本来的的迭代器办法没方法实现，因而须要外部自定义迭代器协定。

const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]
  iteratorMethods.forEach(method => {mutableInstrumentations[method as string] = createIterableMethod(
      method,
      false,
      false
    )
    省略其余代码
  })

这一部分的源码波及的内容比拟多，以上只是简略的总结一下，更具体的内容可查看对应的源码内容。

原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等类型的值，咱们晓得用 Object.defineProperty 必定是不反对，因为它拦挡的就是对象属性的操作，都说 Proxy 比 Object.defineProperty 强，那么它能不能间接反对呢？

间接反对是必定不能的，别忘了 Proxy 代理的指标也还是对象类型呀，它的强是在本人的所属畛域，跨畛域也是遭不住的。

因而在 Vue3 的 ref 函数中对原始值的解决形式是通过为 原始值类型 提供一个通过 new RefImpl(rawValue, shallow) 实例化失去的 包裹对象 ，说白了还是将原始值类型变成对象类型，但 ref 函数的参数并 不限度数据类型：

原始值类型 ，ref 函数中会为原始值类型数据创立 RefImpl 实例对象（必须通过 .value 的形式拜访数据），并且实现自定义的 get、set 用于别离进行 依赖收集 和 依赖更新 ，留神的是这里并不会通过 Proxy 为原始值类型创立代理对象，精确的说在 RefImpl 外部自定义实现的 get、set 就实现了对原始值类型的拦挡操作， 因为原始值类型不须要向对象类型设置那么多的捕捉器
对象类型 ，ref 函数中除了为 对象类型 数据创立 RefImpl 实例对象之外，还会通过 reactive 函数将其转换为响应式数据，其实次要还是为了反对相似如下的操作
```
const refProxy = ref({name: 'zs'})
refProxy.value.name = 'ls'
```
依赖容器 dep，在 ref 类型中依赖存储的地位就是每个 ref 实例对象上的 dep 属性，它实质就是一个 Set 实例，触发 get 时往 dep 中增加副作用函数（依赖），触发 set 时从 dep 中顺次取出副作用函数执行

源码地位：packages\reactivity\src\ref.ts

export function ref(value?: unknown) {return createRef(value, false)
}

function createRef(rawValue: unknown, shallow: boolean) {if (isRef(rawValue)) {return rawValue}
  return new RefImpl(rawValue, shallow)
}

class RefImpl<T> {
  private _value: T
  private _rawValue: T

  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(value: T, public readonly __v_isShallow: boolean) {this._rawValue = __v_isShallow ? value : toRaw(value)
    this._value = __v_isShallow ? value : toReactive(value)
  }

  get value() {
    // 将依赖收集到 dep 中，实际上就是一个 Set 类型
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    // 获取原始数据
    newVal = this.__v_isShallow ? newVal : toRaw(newVal)

    // 通过 Object.is(value, oldValue) 判断新旧值是否统一，若不统一才须要进行更新
    if (hasChanged(newVal, this._rawValue)) {
      // 保留原始值
      this._rawValue = newVal
      // 更新为新的 value 值
      this._value = this.__v_isShallow ? newVal : toReactive(newVal)
      // 依赖更新，从 dep 中取出对应的 effect 函数顺次遍历执行
      triggerRefValue(this, newVal)
    }
  }
}

// 若以后 value 是 对象类型，才会通过 reactive 转换为响应式数据
export const toReactive = <T extends unknown>(value: T): T =>
  isObject(value) ? reactive(value) : value

在 Vue2 中依赖的收集形式是通过 Dep 和 Watcher 的 观察者模式 来实现的，是不是还能想起首次理解 Dep 和 Watcher 之间的这种 剪一直理还乱 的关系时的情绪 ……

对于 设计模式 局部感兴趣可查看 常见 JavaScript 设计模式 — 原来这么简略 一文，外面次要围绕着 Vue 中对应的设计模式来进行介绍，置信会有肯定的帮忙

依赖收集 其实说的就是 track 函数须要解决的内容：

申明 targetMap 作为一个容器，用于保留和以后响应式对象相干的依赖内容，自身是一个 WeakMap 类型
- 抉择 WeakMap 类型作为容器，是因为 WeakMap 对键（对象类型）的援用是 弱类型 的，一旦内部没有对该键（对象类型）放弃援用时，WeakMap 就会主动将其删除，即 可能保障该对象可能失常被垃圾回收
- 而 Map 类型对键的援用则是 强援用，即使内部没有对该对象放弃援用，但至多还存在 Map 自身对该对象的援用关系，因而会导致该对象不能及时的被垃圾回收
将对应的 响应式数据对象 作为 targetMap 的键，存储和以后响应式数据对象相干的依赖关系 depsMap（属于 Map 实例），即 depsMap 存储的就是和以后响应式对象的每一个 key 对应的具体依赖
将 deps（属于 Set 实例）作为 depsMap 每个 key 对应的依赖汇合，因为每个响应式数据可能在多个副作用函数中被应用，并且 Set 类型用于主动去重的能力

可视化构造如下：

源码地位：packages\reactivity\src\effect.ts

const targetMap = new WeakMap<any, KeyToDepMap>()

export function track(target: object, type: TrackOpTypes, key: unknown) {
  // 以后应该进行依赖收集 且 有对应的副作用函数时，才会进行依赖收集
  if (shouldTrack && activeEffect) {
    // 从容器中取出【对应响应式数据对象】的依赖关系
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      // 若不存在，则进行初始化
      targetMap.set(target, (depsMap = new Map()))
    }

    // 获取和对【应响应式数据对象 key】相匹配的依赖
    let dep = depsMap.get(key)
    if (!dep) {
      // 若不存在，则进行初始化 dep 为 Set 实例
      depsMap.set(key, (dep = createDep()))
    }

    const eventInfo = __DEV__
      ? {effect: activeEffect, target, type, key}
      : undefined

    // 往 dep 汇合中增加 effect 依赖
    trackEffects(dep, eventInfo)
  }
}

export const createDep = (effects?: ReactiveEffect[]): Dep => {const dep = new Set<ReactiveEffect>(effects) as Dep
  dep.w = 0
  dep.n = 0
  return dep
}

以上就是针对 Vue3 中对不同数据类型的解决的内容，无论是 Vue2 还是 Vue3 响应式的外围都是 数据劫持 / 代理、依赖收集、依赖更新，只不过因为实现数据劫持形式的差别从而导致具体实现的差别，在 Vue3 中值得注意的是：

一般对象类型 能够间接配合 Proxy 提供的捕捉器实现响应式
数组类型 也能够间接复用大部分和 一般对象类型 的捕捉器，但其对应的查找办法和隐式批改 length 的办法依然须要被 重写 / 加强
为了反对 汇合类型 的响应式，也对其对应的办法进行了 重写 / 加强
原始值数据类型 次要通过 ref 函数来进行响应式解决，不过内容不会对 原始值类型 应用 reactive（或 Proxy） 函数来解决，而是在外部自定义 get value(){} 和 set value(){} 的形式实现响应式，毕竟原始值类型的操作无非就是读取或设置，外围还是将 原始值类型 转变为了 一般对象类型
- ref 函数可实现原始值类型转换为 响应式数据，但 ref 接管的值类型并没只限定为原始值类型，若接管到的是援用类型，还是会将其通过 reactive 函数的形式转换为响应式数据

肝了近 1W 字的内容，也是目前写得字数最多的文章，人有点麻了 … 哈哈，心愿对大家有所帮忙！！！

前言

从 `Object.defineProperty` 到 `Proxy`

Object.defineProperty

在 Vue2 中的缺点

【扩大】`Object.defineProperty` 和 `Array`？

Proxy & Reflect

Proxy

Reflect

Proxy 为什么须要 Reflect 呢？

怎么了解 `Proxy handler` 中 `receiver` 指向的是以后操作正确上的下文呢？

Vue3 如何应用 Proxy 实现数据劫持？

reactive 函数

createReactiveObject() 函数

捕捉器 Handlers

对象类型的捕捉器 — `mutableHandlers`

`get` 捕捉器

`set` 捕捉器

`deleteProperty` & `has` & `ownKeys` 捕捉器

数组类型捕捉器 —— `arrayInstrumentations`

解决数组索引 `index` 和 `length`

解决数组的查找办法

解决数组影响 `length` 的办法

汇合类型的捕捉器 — `mutableCollectionHandlers`

解决 `代理对象` 无法访问 `汇合类型` 对应的 `属性` 和 `办法`

解决汇合类型的响应式

防止净化原始数据

解决 `forEach` 回调参数

解决迭代器

ref 函数 — 原始值的响应式

Vue3 如何进行依赖收集？

最初

站内搜索

关于vue.js:听说你很了解-Vue3-响应式

前言

从 Object.defineProperty 到 Proxy

Object.defineProperty

在 Vue2 中的缺点

【扩大】Object.defineProperty 和 Array？

Proxy & Reflect

Proxy

Reflect

Proxy 为什么须要 Reflect 呢？

怎么了解 Proxy handler 中 receiver 指向的是以后操作正确上的下文呢？

Vue3 如何应用 Proxy 实现数据劫持？

reactive 函数

createReactiveObject() 函数

捕捉器 Handlers

对象类型的捕捉器 — mutableHandlers

get 捕捉器

set 捕捉器

deleteProperty & has & ownKeys 捕捉器

数组类型捕捉器 —— arrayInstrumentations

解决数组索引 index 和 length

解决数组的查找办法

解决数组影响 length 的办法

汇合类型的捕捉器 — mutableCollectionHandlers

解决 代理对象 无法访问 汇合类型 对应的 属性 和 办法

解决汇合类型的响应式

防止净化原始数据

解决 forEach 回调参数

解决迭代器

ref 函数 — 原始值的响应式

Vue3 如何进行依赖收集？

最初

站内搜索

从 `Object.defineProperty` 到 `Proxy`

【扩大】`Object.defineProperty` 和 `Array`？

怎么了解 `Proxy handler` 中 `receiver` 指向的是以后操作正确上的下文呢？

对象类型的捕捉器 — `mutableHandlers`

`get` 捕捉器

`set` 捕捉器

`deleteProperty` & `has` & `ownKeys` 捕捉器

数组类型捕捉器 —— `arrayInstrumentations`

解决数组索引 `index` 和 `length`

解决数组影响 `length` 的办法

汇合类型的捕捉器 — `mutableCollectionHandlers`

解决 `代理对象` 无法访问 `汇合类型` 对应的 `属性` 和 `办法`

解决 `forEach` 回调参数