Vue 3 响应式的手写实现

Vue 2 和 Vue 3 的拦截方式#

Vue 2 用 Object.defineProperty 逐个改写属性的读写。这个实现有三处拦不住的地方：给对象新增或删除属性、给数组赋值下标、改数组的 length。所以 Vue 2 额外提供了 Vue.set 和 Vue.delete，用它们补上新增和删除。

Vue 3 换成 Proxy 代理整个对象，读写、删除、in 判断都能拦到，数组下标和 length 也一样。上面那三处限制都来自 Vue 2 的实现方式，换成 Proxy 后不再存在。

Proxy 还有一处改动是递归时机。Vue 2 在初始化时把整棵对象树走一遍，Vue 3 只在读取到嵌套对象时才把它转成代理，没被访问到的层级不会创建代理。

四个核心步骤#

这一节的代码是教学用的简化实现，不是 Vue 源码。

最小实现需要四个部分：

reactive：用 Proxy 包装对象，拦截读写
effect：注册副作用函数，让它先执行一次
track：读属性时把当前副作用存进依赖表
trigger：改属性时取出依赖表里的副作用并执行

reactive 拦截读写#

get 里先把值取出来，再交给 track 记录依赖；set 写回新值之后调用 trigger。两个都走 Reflect，receiver 一路带下去，this 才指向代理对象。

1
export const reactive = (target) => {
2
  return new Proxy(target, {
3
    get(target, key, receiver) {
4
      const res = Reflect.get(target, key, receiver)
5
      track(target, key)      // 收集依赖
6
      return res
7
    },
8
    set(target, key, value, receiver) {
9
      const res = Reflect.set(target, key, value, receiver)
10
      trigger(target, key)    // 触发更新
11
      return res
12
    },
13
  })
14
}

effect 记录当前副作用#

activeEffect 是一个模块级变量，指向当前正在执行的副作用函数。track 靠它知道该把依赖记在谁头上。

函数执行完要把它复位。不复位的话，在 effect 之外读响应式属性，track 会把上一次的副作用记进依赖表，或者把 undefined 记进去，让 trigger 抛错。真实实现用 try/finally 复位。

1
let activeEffect
2

3
export const effect = (fn) => {
4
  const _effect = () => {
5
    activeEffect = _effect   // 标记当前正在运行的函数
6
    fn()                     // 执行时会读到响应式数据，触发 get
7
    activeEffect = undefined // 执行完复位，避免污染后面的 track
8
  }
9
  _effect()
10
}

track 收集依赖#

依赖表是三层嵌套结构：WeakMap 按对象分，Map 按属性名分，Set 存副作用。第一层用 WeakMap，对象没人引用时整张表能被回收。

每一层都是“没有就先建”，建完把 activeEffect 加进最里面的 Set。

1
const targetMap = new WeakMap()
2

3
export const track = (target, key) => {
4
  let depsMap = targetMap.get(target)
5
  if (!depsMap) {
6
    depsMap = new Map()
7
    targetMap.set(target, depsMap)
8
  }
9

10
  let deps = depsMap.get(key)
11
  if (!deps) {
12
    deps = new Set()
13
    depsMap.set(key, deps)
14
  }
15

16
  deps.add(activeEffect)
17
}

trigger 执行依赖#

改属性时反向查一遍：先按对象找到 Map，再按属性名找到 Set，把里面的副作用挨个执行。

每改一次属性就会触发一轮，没有去重和批量。

1
export const trigger = (target, key) => {
2
  const depsMap = targetMap.get(target)
3
  if (!depsMap) return
4

5
  const deps = depsMap.get(key)
6
  deps.forEach((effect) => {
7
    effect()   // 重新执行
8
  })
9
}

让嵌套对象也有响应式#

上面的 get 直接把原始值返回。如果读到的是对象，就把读到的值再过一次 reactive，嵌套层级才会各自带代理。

改成递归之后，target.friend.name = 'zl' 这种深层赋值也能触发更新。

1
import { track, trigger } from './effect'
2

3
const isObject = (target) => target !== null && typeof target === 'object'
4

5
export const reactive = (target) => {
6
  return new Proxy(target, {
7
    get(target, key, receiver) {
8
      const res = Reflect.get(target, key, receiver)
9

10
      track(target, key)
11

12
      // 读到的值是对象就再代理一层
13
      if (isObject(res)) {
14
        return reactive(res)
15
      }
16

17
      return res
18
    },
19
    set(target, key, value, receiver) {
20
      const res = Reflect.set(target, key, value, receiver)
21

22
      trigger(target, key)
23

24
      return res
25
    },
26
  })
27
}

每个嵌套对象访问一次就新建一个代理，同一份数据反复读会拿到不同代理。真实源码用 proxyMap 缓存已经建好的代理。

当海风翻页时

Vue 2 和 Vue 3 的拦截方式#

四个核心步骤#

reactive 拦截读写#

effect 记录当前副作用#

track 收集依赖#

trigger 执行依赖#

让嵌套对象也有响应式#

Vue 3 学习笔记

继续阅读

换条路线

当海风翻页时

Vue 2 和 Vue 3 的拦截方式#

四个核心步骤#

reactive 拦截读写#

effect 记录当前副作用#

track 收集依赖#

trigger 执行依赖#

让嵌套对象也有响应式#

分享文章

沿着主题读

换条路线