Vue3 源码解读 -- reactive

Vue3 源码解读 -- reactive

四月 11, 2022

Reactive 依赖收集思路

Reactive API

createReactiveObject ： 创建 reactive 对象

函数首先判断 target 是否是一个数组 或者 对象类型，如果不是直接返回。
原始数据 target 必须是数组 或者 对象
对于一个已经是响应式的对象，再次执行后仍旧应该是一个响应式对象

reactive 的底层实现

使用 TypeScript 实现 reactive [基本流程]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function reactive(raw) {
  return new Proxy({}, {
    get(target, key) {
      // 返回该对象的属性值
      const res = Reflect.get(target, key)
      // 如果获取到的对象依旧是一个对象，那么给他的内部继续包裹 reactive
      if (isObject(res)) {
        return reactive(res)
      }
      // 收集依赖，具体收集可以查看 effect.md
      track(target, key)

      return res
    },
    set(target, key, value) {
      // 更改指定 key 的值
      const res: boolean = Reflect.set(target, key, value)
      // 触发依赖
      trigger(target, key)

      return res
    },
  })
}
  1. 1. Reactive 依赖收集思路
    1. 1.1. Reactive API
    2. 1.2. reactive 的底层实现