Vue 3 的四种响应式代理

四个 API 出自同一个函数#

reactive、shallowReactive、readonly、shallowReadonly 的返回值形态不同，但源码里都走同一个入口：createReactiveObject，位于 packages/reactivity/src/reactive.ts。

1
function createReactiveObject(
2
  target: Target,
3
  isReadonly: boolean,
4
  baseHandlers: ProxyHandler<any>,
5
  collectionHandlers: ProxyHandler<any>,
6
  proxyMap: WeakMap<Target, any>,
7
) {
8
  // …省略前面的类型检查与标记判断
9

10
  // 同一个对象重复代理时直接复用缓存
11
  const existingProxy = proxyMap.get(target)
12
  if (existingProxy) {
13
    return existingProxy
14
  }
15

16
  const targetType = targetTypeMap(toRawType(target))
17
  const proxy = new Proxy(
18
    target,
19
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers,
20
  )
21
  proxyMap.set(target, proxy)
22
  return proxy
23
}

四个 API 的区别，只是往这个函数里传了不同的 handler 和不同的 proxyMap。

底层是 Proxy#

Vue 3 的响应式只建立在 ES6 Proxy 上。get 里收集依赖，set 里触发更新。下面是简化示意：

1
new Proxy(target, {
2
  get(target, key) {
3
    track(target, key)   // 读取属性时收集依赖
4
    return Reflect.get(target, key)
5
  },
6
  set(target, key, val) {
7
    const result = Reflect.set(target, key, val)
8
    trigger(target, key) // 修改属性时触发更新
9
    return result
10
  }
11
})

原始类型想获得响应式，只能先包进对象，交给 ref 处理。

差异只有三个维度#

isReadonly：是否只读
handler：传 mutableHandlers 还是 readonlyHandlers，以及是否用浅层版本
proxyMap：用哪个缓存表

下面四节分别看这四个 API。

reactive：深度响应式#

返回一个深度响应式代理，嵌套对象会自动递归转成响应式。

1
export function reactive<T extends object>(target: T): Reactive<T>
2
export function reactive(target: object) {
3
  // 对只读代理调用 reactive，直接返回它本身
4
  if (isReadonly(target)) {
5
    return target
6
  }
7
  return createReactiveObject(
8
    target,
9
    false,
10
    mutableHandlers,
11
    mutableCollectionHandlers,
12
    reactiveMap,
13
  )
14
}

mutableHandlers 的行为：

get 时自动递归 reactive 子对象，并调用 track 收集依赖
set 时调用 trigger 触发更新
所有层级都被监听

1
const person = reactive({
2
  name: 'zs',
3
  age: 18,
4
  friend: { name: 'ls' }
5
})
6

7
person.name = 'ww'         // 触发更新
8
person.friend.name = 'zl'  // 也触发，嵌套对象已被递归代理

shallowReactive：只有第一层响应式#

只有第一层属性是响应式的，深层对象不代理、不递归。

1
export function shallowReactive<T extends object>(
2
  target: T,
3
): ShallowReactive<T> {
4
  return createReactiveObject(
5
    target,
6
    false,
7
    shallowReactiveHandlers,
8
    shallowCollectionHandlers,
9
    shallowReactiveMap,
10
  )
11
}

它沿用同一套 get 逻辑，只是在收集完依赖之后提前返回，不做递归代理。真实源码里的这两行就是全部差别：

1
if (!isReadonly) {
2
  track(target, TrackOpTypes.GET, key)
3
}
4

5
if (isShallow) {
6
  return res
7
}

所以第一层的读取照样会被追踪，只有嵌套对象不再被转换。

1
const person = shallowReactive({
2
  name: 'zs',
3
  friend: { name: 'ls' }
4
})
5

6
person.name = 'ww'         // 触发更新
7
person.friend.name = 'zl'  // 不触发，深层不是 Proxy

另外一点和 reactive 不同：shallowReactive 不会自动解包 ref，根级属性上的 ref 需要写 .value。

readonly：深度只读#

返回一个深度只读代理，任何层级都只能读。

1
export function readonly<T extends object>(
2
  target: T,
3
): DeepReadonly<UnwrapNestedRefs<T>> {
4
  return createReactiveObject(
5
    target,
6
    true,
7
    readonlyHandlers,
8
    readonlyCollectionHandlers,
9
    readonlyMap,
10
  )
11
}

readonlyHandlers 拒绝写入。真实源码里警告只在开发环境发出：

1
set(target: object, key: string | symbol) {
2
  if (__DEV__) {
3
    warn(
4
      `Set operation on key "${String(key)}" failed: target is readonly.`,
5
      target,
6
    )
7
  }
8
  return true
9
}

deleteProperty 同样处理：开发环境报警告，然后返回 true。

1
const state = readonly({
2
  name: 'zs',
3
  friend: { name: 'ls' }
4
})
5

6
state.name = 'ww'         // 警告，不生效
7
state.friend.name = 'zl'  // 警告，不生效，深层同样只读

组件的 props 也是只读的。官方要求单向数据流，在子组件里改 props 会在控制台收到告警。

不过要注意别把这句理解成「props 是 readonly() 的返回值」。源码里 instance.props 拿到的是 shallowReactive(props)，对外暴露的 $props 才会在开发环境被 shallowReadonly 再包一层，写入告警也来自这里。

「只读」指的是不能改这条约束，而不是说 props 由 readonly() 创建。

shallowReadonly：只有第一层只读#

第一层只读，深层可以修改，而且深层不是响应式。

1
export function shallowReadonly<T extends object>(target: T): Readonly<T> {
2
  return createReactiveObject(
3
    target,
4
    true,
5
    shallowReadonlyHandlers,
6
    shallowReadonlyCollectionHandlers,
7
    shallowReadonlyMap,
8
  )
9
}

第一层：set 被拦截，只读
深层：直接返回原对象，不代理，可以修改

1
const state = shallowReadonly({
2
  name: 'zs',
3
  friend: { name: 'ls' }
4
})
5

6
state.name = 'ww'         // 禁止，发出警告
7
state.friend.name = 'zl'  // 允许，且不触发更新

它同样不会自动解包 ref。

四个 API 对照#

API	可写范围	代理范围
`reactive`	全部层级可写	全部层级，嵌套对象递归代理
`shallowReactive`	全部层级可写，深层修改不触发更新	仅第一层
`readonly`	全部层级只读，写入在开发环境告警	全部层级
`shallowReadonly`	仅第一层只读	仅第一层

当海风翻页时

四个 API 出自同一个函数#

底层是 Proxy#

差异只有三个维度#

reactive：深度响应式#

shallowReactive：只有第一层响应式#

readonly：深度只读#

shallowReadonly：只有第一层只读#

四个 API 对照#

Vue 3 学习笔记

继续阅读

换条路线

当海风翻页时

四个 API 出自同一个函数#

底层是 Proxy#

差异只有三个维度#

reactive：深度响应式#

shallowReactive：只有第一层响应式#

readonly：深度只读#

shallowReadonly：只有第一层只读#

四个 API 对照#

分享文章

沿着主题读

换条路线