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

大家好，欢迎来到今天的“Vue 3 源码刨析”小课堂！今天咱们不搞虚头巴脑的，直接上干货，聊聊 Vue 3 里面那两个“小气鬼”—— shallowReactive 和 shallowRef。

这俩兄弟，为啥我要叫他们“小气鬼”呢？因为他们跟 reactive 和 ref 相比，在处理响应式数据的时候，特别“抠门”，能省则省，能不深入就不深入。这种“抠门”的行为，其实是为了优化内存占用和响应式开销。

咱们先来个热身：reactive 和 ref 的“壕”操作

在深入了解 shallowReactive 和 shallowRef 之前，咱们先回顾一下 reactive 和 ref 这两位“土豪”是怎么玩的。

reactive 会递归地将一个对象变成响应式对象。这意味着，如果你的对象里面嵌套了对象，reactive 会把所有嵌套的对象都变成响应式的。

import { reactive } from 'vue';

const data = reactive({
  name: '张三',
  address: {
    city: '北京',
    street: '长安街'
  }
});

// data.address 也是一个响应式对象
data.address.city = '上海'; // 会触发更新

ref 呢，虽然直接包裹的是一个原始值，但如果这个原始值是对象，它内部也会用 reactive 来处理，也会进行深层的响应式转换。

import { ref } from 'vue';

const data = ref({
  name: '张三',
  address: {
    city: '北京',
    street: '长安街'
  }
});

// data.value.address 也是一个响应式对象
data.value.address.city = '上海'; // 会触发更新

这种“壕”操作，好处是任何层级的变化都能被追踪到，响应式系统能够精确地更新视图。但是，如果你的数据结构很复杂，嵌套很深，这就会带来两个问题：

1. 内存占用高： 每个对象都要创建 Proxy，都要维护依赖关系，消耗的内存自然就多。
2. 响应式开销大： 即使你只修改了最外层的一点点数据，也会触发整个对象的依赖更新，性能浪费。

shallowReactive：浅尝辄止的“抠门”之道

shallowReactive 就像一个只喜欢浅尝辄止的食客，它只会把对象的第一层变成响应式，嵌套的对象就放过了。

import { shallowReactive } from 'vue';

const data = shallowReactive({
  name: '张三',
  address: {
    city: '北京',
    street: '长安街'
  }
});

// data 是响应式的，但是 data.address 不是
data.name = '李四'; // 会触发更新
data.address.city = '上海'; // 不会触发更新！

看到了吗？修改 data.name 会触发更新，但是修改 data.address.city 却不会。因为 data.address 根本就不是响应式的！

源码揭秘：shallowReactive 的“抠门”策略

让我们深入 shallowReactive 的源码（简化版）一探究竟：

import { isObject } from '@vue/shared';
import {
  mutableHandlers,
  shallowReactiveHandlers
} from './baseHandlers';

export function shallowReactive(target) {
  return createReactiveObject(
    target,
    false, // isReadonly
    shallowReactiveHandlers,
    mutableCollectionHandlers
  );
}

// baseHandlers.ts
export const shallowReactiveHandlers = {
  get: shallowGet,
  set: shallowSet,
  has: has,
  ownKeys: ownKeys
};

function shallowGet(target, key, receiver) {
  const res = Reflect.get(target, key, receiver);
  // 这里没有 track！
  return isObject(res) ? res : res; // 如果是对象，直接返回，不进行 reactive 处理
}

function shallowSet(target, key, value, receiver) {
  const oldValue = target[key];
  const result = Reflect.set(target, key, value, receiver);
  if (value !== oldValue) {
    triggerEffects(target, key); // 触发依赖更新
  }
  return result;
}

关键在于 shallowGet 函数。它在获取属性值的时候，如果发现属性值还是一个对象，它不会递归地调用 reactive 来将其变成响应式对象，而是直接返回。这就是 shallowReactive “抠门”的地方。

shallowSet 负责设置属性的时候，如果值发生改变，会触发依赖更新。

shallowRef：只管第一印象的“抠门”大叔

shallowRef 比 shallowReactive 更“抠门”。它只关心 ref 包裹的原始值是否发生改变，如果这个原始值是一个对象，它根本就不管这个对象内部的变化。

import { shallowRef } from 'vue';

const data = shallowRef({
  name: '张三',
  address: {
    city: '北京',
    street: '长安街'
  }
});

// data.value 是一个普通对象，不是响应式的
data.value.name = '李四'; // 不会触发更新！
data.value.address.city = '上海'; // 不会触发更新！

// 必须替换整个对象才会触发更新
data.value = {
  name: '王五',
  address: {
    city: '深圳',
    street: '深南大道'
  }
}; // 会触发更新

看到了吗？修改 data.value 里面的任何属性都不会触发更新，只有当你把 data.value 整个替换掉的时候，才会触发更新。

源码剖析：shallowRef 的“视而不见”

让我们来看看 shallowRef 的源码（简化版）：

import { isObject } from '@vue/shared';
import { trackRefValue, triggerRefValue } from './ref';

export function shallowRef(value) {
  return createRef(value, true); // isShallow = true
}

function createRef(rawValue, isShallow = false) {
  return new RefImpl(rawValue, isShallow);
}

class RefImpl {
  constructor(rawValue, isShallow) {
    this._rawValue = rawValue;
    this._shallow = isShallow;
    this._value = isShallow ? rawValue : convert(rawValue); // 如果不是 shallow，则进行 reactive 处理
  }

  get value() {
    trackRefValue(this);
    return this._value;
  }

  set value(newValue) {
    if (hasChanged(newValue, this._rawValue)) {
      this._rawValue = newValue;
      this._value = this._shallow ? newValue : convert(newValue); // 如果不是 shallow，则进行 reactive 处理
      triggerRefValue(this);
    }
  }
}

关键在于 RefImpl 类的 constructor 和 set value 方法。

• 在 constructor 中，如果 isShallow 为 true，则 this._value 直接等于 rawValue，不会进行 reactive 处理。
• 在 set value 方法中，如果 isShallow 为 true，则 this._value 直接等于 newValue，也不会进行 reactive 处理。

convert 函数，就是用来把 rawValue 变成响应式对象的。但是，当 isShallow 为 true 的时候，这个函数根本就不会被调用！

shallowReactive 和 shallowRef 的应用场景

既然 shallowReactive 和 shallowRef 这么“抠门”，那它们有什么用呢？它们主要适用于以下场景：

1. 大型数据结构，只有顶层属性需要响应式： 比如一个复杂的配置对象，你只需要监听配置对象的某些属性是否发生改变，而不需要关心配置对象内部的嵌套对象的具体变化。
2. 性能敏感的场景： 当你需要处理大量数据，并且对性能要求很高的时候，使用 shallowReactive 和 shallowRef 可以显著减少内存占用和响应式开销。
3. 与第三方库集成： 有些第三方库返回的对象，Vue 不需要进行深度响应式处理，可以使用 shallowReactive 或 shallowRef 来包装，避免不必要的性能损耗。

代码示例：shallowReactive 的妙用

假设你正在开发一个大型的表格组件，表格的数据源是一个包含大量数据的数组。你只需要监听数据的总数是否发生改变，而不需要关心每个数据的具体内容。

<template>
  <div>
    <p>数据总数：{{ dataCount }}</p>
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
</template>

<script>
import { shallowReactive, computed } from 'vue';

export default {
  setup() {
    const rawData = []; // 假设这是一个包含大量数据的数组
    for (let i = 0; i < 10000; i++) {
      rawData.push({ id: i, name: `数据${i}` });
    }

    const data = shallowReactive({
      list: rawData
    });

    const dataCount = computed(() => data.list.length);

    // 模拟数据更新
    setTimeout(() => {
      data.list = [...rawData, { id: 10000, name: '新增数据' }]; // 替换整个数组
    }, 3000);

    return {
      dataCount
    };
  }
};
</script>

在这个例子中，我们使用了 shallowReactive 来包装 data 对象。只有当 data.list 整个数组被替换的时候，dataCount 才会更新。如果使用 reactive，那么每次修改 rawData 里面的任何一个数据，都会触发 dataCount 的更新，导致不必要的性能开销。

代码示例：shallowRef 的精打细算

假设你正在开发一个地图组件，地图的数据源是一个包含大量坐标点的对象。你只需要监听坐标点对象是否被替换，而不需要关心坐标点内部的经纬度是否发生改变。

<template>
  <div>
    <p>当前坐标：{{ coordinate.lng }}, {{ coordinate.lat }}</p>
    <!-- 地图组件 -->
  </div>
</template>

<script>
import { shallowRef } from 'vue';

export default {
  setup() {
    const initialCoordinate = {
      lng: 116.4074,
      lat: 39.9042
    };

    const coordinate = shallowRef(initialCoordinate);

    // 模拟坐标更新
    setTimeout(() => {
      coordinate.value = {
        lng: 114.3055,
        lat: 30.5931
      }; // 替换整个对象
    }, 3000);

    return {
      coordinate
    };
  }
};
</script>

在这个例子中，我们使用了 shallowRef 来包装 coordinate 对象。只有当 coordinate.value 整个对象被替换的时候，视图才会更新。如果使用 ref，那么每次修改 initialCoordinate 里面的 lng 或 lat，都会触发视图的更新，导致不必要的性能开销。

总结：该“壕”则“壕”，该“抠”则“抠”

shallowReactive 和 shallowRef 并不是万能的，它们只适用于特定的场景。在选择使用它们的时候，你需要仔细考虑你的数据结构和响应式需求。

特性	reactive / ref	shallowReactive	shallowRef
响应式深度	深层	浅层	浅层
内存占用	高	低	低
响应式开销	高	低	低
适用场景	需要深层响应式的场景	只需要浅层响应式的场景	只需要浅层响应式的场景
嵌套对象的处理	创建深层 Proxy	只创建顶层 Proxy	不创建 Proxy

记住，在 Vue 的世界里，没有最好的解决方案，只有最合适的解决方案。该“壕”的时候，就用 reactive 和 ref，尽情享受深层响应式带来的便利；该“抠”的时候，就用 shallowReactive 和 shallowRef，精打细算，优化性能。

好了，今天的“Vue 3 源码刨析”小课堂就到这里。希望大家以后在使用 Vue 的时候，能够更加灵活地选择合适的响应式方案，写出高性能、高效率的代码！