分析 Vue 3 源码中 `shallowReactive` 和 `shallowRef` 如何通过跳过深层嵌套对象的 `Proxy` 转换，来优化内存占用和响应式开销。

Vue 3 性能优化秘籍：浅尝辄止的响应式魔法

大家好，我是老码，今天咱们不聊虚的，直接上干货，扒一扒 Vue 3 源码里两个神奇的 API：shallowReactive 和 shallowRef。

别看名字里都有个 "shallow"（浅），它们可是 Vue 3 性能优化的两把利剑，专门用来对付那些“身陷泥潭”的庞大对象。为啥这么说？ 咱们先从 Vue 的响应式原理说起。

深潜：Vue 3 响应式的“深水区”

Vue 的核心魅力在于它的响应式系统，一旦数据发生变化，UI 就能自动更新。这个机制背后的功臣就是 Proxy。Vue 3 用 Proxy 代理了数据对象，当访问或修改对象的属性时，会触发 get 和 set 陷阱，从而通知相关的依赖进行更新。

这听起来很美好，但问题来了：如果对象嵌套层级很深，Vue 会递归地为每一层级的对象都创建 Proxy，这就好比给一棵枝繁叶茂的树上的每一片叶子都绑上一个监控器，成本很高。

想象一下，你有一个超复杂的配置对象，里面包含了各种设置，但你只需要修改顶层的一些属性，如果 Vue 把整个对象都变成响应式的，那简直是浪费资源。

const config = {
  app: {
    name: 'MyApp',
    version: '1.0.0',
    theme: {
      primaryColor: '#007bff',
      secondaryColor: '#6c757d',
      // ... 更多样式
    },
  },
  user: {
    id: 123,
    name: '老码',
    email: '[email protected]',
    profile: {
      bio: '一个喜欢写代码的老码',
      location: '未知',
      // ... 更多个人信息
    },
  },
  // ... 更多配置
};

// 如果用 reactive，整个 config 对象都会变成响应式的
const reactiveConfig = reactive(config);

reactiveConfig.app.name = 'MyNewApp'; // 触发更新，但可能不必要地遍历了深层对象

在这个例子中，我们只修改了 app.name，但如果 config 对象非常庞大，那么 Vue 在创建响应式对象时，会递归地遍历并代理 theme、user 甚至更深层的 profile 对象，造成不必要的性能开销。

浅尝：shallowReactive 的“止步不前”

这时候，shallowReactive 就闪亮登场了。它就像一个“浅水炸弹”，只对对象的顶层属性进行 Proxy 代理，而不会深入到嵌套对象中。这意味着，嵌套对象的变化不会触发响应式更新。

const shallowReactiveConfig = shallowReactive(config);

shallowReactiveConfig.app.name = 'MyNewApp'; // 触发更新
shallowReactiveConfig.app.theme.primaryColor = '#ff0000'; // 不会触发更新！

看到区别了吗？修改 shallowReactiveConfig.app.name 会触发更新，因为 app 是顶层属性，被 Proxy 代理了。但是，修改 shallowReactiveConfig.app.theme.primaryColor 不会触发更新，因为 theme 是 app 的一个嵌套对象，没有被 Proxy 代理。

shallowReactive 的源码解析

shallowReactive 的实现其实很简单，它只是在创建 Proxy 的时候，阻止了递归调用 reactive 函数。

// Vue 3 源码 (简化版)
function shallowReactive(target: object) {
  return createReactiveObject(
    target,
    false, // isReadonly
    shallowHandlers, // baseHandlers
    shallowCollectionHandlers // collectionHandlers
  )
}

function createReactiveObject(
  target: object,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any> | null
) {
  // ... 省略缓存判断和类型检查

  const proxy = new Proxy(
    target,
    collectionHandlers ? collectionHandlers : baseHandlers
  )
  return proxy
}

const shallowHandlers: ProxyHandler<object> = {
  get: /*#__PURE__*/ createGetter(false, true), // readonly, shallow
  set: createSetter(false, true), // readonly, shallow
  deleteProperty: createDeleteProperty(),
  has: createHas(),
  ownKeys: createOwnKeys()
}

function createGetter(isReadonly: boolean, shallow: boolean) {
  return function get(target: object, key: string | symbol, receiver: object) {
    const res = Reflect.get(target, key, receiver);
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }
    if (shallow) {
      return res
    }
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res)
    }
    return res
  }
}

function createSetter(isReadonly: boolean, shallow: boolean) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key]
    if (!isReadonly) {
      let success = Reflect.set(target, key, value, receiver)
      if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
      return success
    } else {
      return false
    }
  }
}

关键就在 createGetter 函数中的 if (shallow) 判断。如果 shallow 为 true（也就是 shallowReactive 的情况），那么直接返回属性值 res，而不会递归地调用 reactive 或 readonly 函数。

shallowReactive 的适用场景

• 大型配置对象： 像上面 config 例子，如果只需要修改顶层属性，shallowReactive 可以显著减少内存占用和初始化时间。
• 外部库返回的对象： 有些外部库返回的对象，Vue 不需要对其进行深度响应式处理，shallowReactive 可以避免不必要的开销。
• 明确知道不需要深度响应式的场景： 例如，某些只用于展示的数据，或者只在特定情况下才会修改的数据。

浅尝：shallowRef 的“一叶障目”

shallowRef 和 shallowReactive 类似，也是一种“浅”响应式 API。但它们的作用对象不同：shallowRef 用于创建对值的浅层响应式引用，而 shallowReactive 用于创建对象的浅层响应式代理。

这意味着，shallowRef 代理的是一个值的引用，只有当这个引用本身发生变化时，才会触发更新。如果引用的值是一个对象，那么修改对象内部的属性不会触发更新。

const count = shallowRef(0);

count.value = 1; // 触发更新

const user = shallowRef({ name: '老码', age: 30 });

user.value.name = '新码'; // 不会触发更新！
user.value = { name: '新码', age: 30 }; // 触发更新

在这个例子中，修改 count.value 会触发更新，因为 count 的引用发生了变化。但是，修改 user.value.name 不会触发更新，因为 user 的引用没有发生变化，只是引用对象内部的属性发生了变化。只有当 user.value 被赋予一个新的对象时，才会触发更新。

shallowRef 的源码解析

shallowRef 的实现也比较简单，它在内部使用了一个普通的变量来存储值，并在 get 和 set 陷阱中进行依赖收集和触发更新。

// Vue 3 源码 (简化版)
function shallowRef(value: T) {
  return createRef(value, true)
}

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

class RefImpl<T> {
  private _value: T
  public readonly __v_isRef = true

  constructor(value: T, public readonly _shallow: boolean) {
    this._value = _shallow ? value : convert(value)
  }

  get value() {
    track(this, TrackOpTypes.GET, 'value')
    return this._value
  }

  set value(newVal) {
    if (hasChanged(newVal, this._value)) {
      this._value = this._shallow ? newVal : convert(newVal)
      trigger(this, TriggerOpTypes.SET, 'value')
    }
  }
}

function convert(val: any): any {
  return isObject(val) ? reactive(val) : val
}

关键在于 RefImpl 类中的 constructor 和 set value 方法。在构造函数中，如果 _shallow 为 true，则直接将原始值赋给 _value，否则调用 convert 函数，将对象转换为响应式对象。在 set value 方法中，同样会根据 _shallow 的值来决定是否将新值转换为响应式对象。

shallowRef 的适用场景

• 大型对象的部分更新： 如果你需要对一个大型对象进行部分更新，但又不想让整个对象都变成响应式的，可以使用 shallowRef 来包装这个对象，然后手动更新对象的属性。
• 与外部状态管理库集成： 有些外部状态管理库（例如 Zustand）可能已经提供了自己的状态管理机制，Vue 不需要对其进行响应式处理，可以使用 shallowRef 来包装这些状态。
• 性能敏感的场景： 在性能敏感的场景下，可以使用 shallowRef 来减少响应式对象的数量，从而提高性能。

shallowReactive vs. shallowRef：傻傻分不清？

很多同学容易把 shallowReactive 和 shallowRef 搞混，这里老码给大家总结一下它们的区别：

特性	shallowReactive	shallowRef
作用对象	对象	值 (可以是任何类型)
响应式深度	顶层属性是响应式的，嵌套对象不是响应式的	只有引用本身是响应式的，引用的对象内部属性不是响应式的
使用方式	直接访问对象的属性	通过 .value 访问值
适用场景	大型配置对象，外部库返回的对象，明确不需要深度响应式的场景	大型对象的部分更新，与外部状态管理库集成，性能敏感的场景

总而言之，shallowReactive 用于创建对象的浅层响应式代理，而 shallowRef 用于创建对值的浅层响应式引用。

使用 shallowReactive 和 shallowRef 的注意事项

• 谨慎使用： shallowReactive 和 shallowRef 牺牲了响应式的深度，换取了性能的提升。在使用它们之前，务必仔细评估是否真的不需要深度响应式。
• 手动更新： 如果使用了 shallowReactive 或 shallowRef，那么需要手动更新嵌套对象的属性，或者手动更新 ref 的值。
• 避免滥用： 不要为了优化而优化，如果你的应用性能瓶颈不在响应式系统上，那么使用 shallowReactive 和 shallowRef 可能适得其反。

总结：量体裁衣，适可而止

shallowReactive 和 shallowRef 是 Vue 3 提供给我们的两把利器，它们可以帮助我们优化内存占用和响应式开销。但是，它们也需要我们谨慎使用，避免滥用。

记住，性能优化不是银弹，而是一种权衡。我们需要根据实际情况，选择最适合的方案。就像裁缝师傅做衣服一样，要量体裁衣，才能做出最合身的衣服。

好了，今天的讲座就到这里，希望大家能够掌握 shallowReactive 和 shallowRef 的使用技巧，让你的 Vue 应用飞起来！ 如果大家喜欢，下次老码再给大家讲讲 Vue 3 的其他性能优化技巧。 码字不易，给老码点个赞再走呗！