Vue3 triggerRef手动触发shallowRef的响应式更新

在 Vue 3 的响应式系统中，ref 和 reactive 是构建数据驱动视图的核心。然而，在处理大型数据结构或性能敏感场景时，Vue 3 提供了 shallowRef 和 shallowReactive 这样的“浅层响应式” API。shallowRef 只有在 .value 属性被整体替换时才会触发视图更新，直接修改其内部嵌套对象的属性并不会触发响应。

为了解决这一限制，Vue 3 提供了 triggerRef 工具函数，用于强制执行与特定 shallowRef 关联的任何副作用（effects）。本文将详细演示如何在无法自动触发更新的场景中，手动使用 triggerRef 实现响应式更新。

1. 理解 shallowRef 的响应式局限

在使用 triggerRef 之前，必须先理解 shallowRef 的行为特性。与普通的 ref 不同，shallowRef 不会对其内部对象的嵌套属性进行深层代理。

创建 一个简单的 Vue 组件示例，观察 shallowRef 的默认行为。

1. 定义 一个 shallowRef 变量，其值为一个包含嵌套属性的对象。
2. 挂载 该数据到模板中。
3. 修改 对象内部的某个具体属性值。
4. 观察 页面是否发生变化。

在这个阶段，你会发现虽然 JS 中的数据已经改变，但视图并未重新渲染。这是因为 shallowRef 只追踪对 .value 本身的引用变化，而不追踪 .value 内部属性的变化。

2. 使用 triggerRef 强制更新

当修改了 shallowRef 内部对象的属性后，必须显式通知 Vue 进行更新。这就是 triggerRef 的作用。

执行 以下步骤来实现手动触发更新：

1. 引入 triggerRef 函数。
2. 获取 需要更新的 shallowRef 实例。
3. 执行 内部属性的修改操作（例如 state.value.count++）。
4. 调用 triggerRef，并将该 shallowRef 实例作为参数传入。

通过这一步操作，Vue 会强制触发该 ref 关联的所有副作用，从而更新视图。

3. 完整代码实现

下面是一个完整的 Vue 3 组件示例，展示了如何结合 shallowRef 和 triggerRef。

<template>
  <div class="container">
    <h2>ShallowRef 与 TriggerRef 示例</h2>
    <div class="card">
      <p><strong>当前计数 (嵌套属性):</strong> {{ state.value.count }}</p>
      <div class="button-group">
        <button @click="updateWithoutTrigger">
          直接修改 (无效)
        </button>
        <button @click="updateWithTrigger">
          修改 + triggerRef (有效)
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { shallowRef, triggerRef } from 'vue';

// 1. 初始化 shallowRef
// 注意：只有 .value 的替换是响应式的，state.value.count 的改变默认不是
const state = shallowRef({
  count: 0,
  name: 'Test Object'
});

// 2. 尝试直接修改内部属性（不会触发视图更新）
const updateWithoutTrigger = () => {
  state.value.count++;
  console.log('数据已修改 (内部):', state.value.count);
  // 此时控制台输出新值，但界面上的数字保持不变
};

// 3. 修改内部属性并使用 triggerRef 强制更新
const updateWithTrigger = () => {
  state.value.count++;
  console.log('数据已修改 (内部):', state.value.count);

  // 关键步骤：手动触发响应式更新
  triggerRef(state);
};
</script>

<style scoped>
.container {
  padding: 20px;
  font-family: sans-serif;
}
.card {
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
  margin-top: 10px;
}
.button-group {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}
button {
  padding: 8px 16px;
  cursor: pointer;
}
</style>

运行 上述代码：

1. 点击 “直接修改 (无效)” 按钮。观察界面数字无变化，尽管 console.log 输出了增加后的数值。
2. 点击 “修改 + triggerRef (有效)” 按钮。观察界面数字立即更新。

4. 更新流程分析

为了更直观地理解两者的区别，下面的流程图展示了 shallowRef 在不同操作下的响应式判定逻辑。

5. 性能对比与最佳实践

shallowRef 的主要目的是优化性能。对于大型对象（如复杂的表单数据树或长列表），使用普通的 ref 会产生显著的深层代理开销。

下表对比了普通 ref、shallowRef（无优化）以及 shallowRef + triggerRef 的特性与适用场景。

遵循 以下最佳实践以确保代码的高效与可维护性：

1. 识别 真正的痛点：仅在处理大型数据结构且频繁读取、偶尔写入的场景下使用 shallowRef。
2. 封装 更新逻辑：不要散落调用 triggerRef。建议将数据修改和 triggerRef 调用封装在同一个函数中。

   const updateState = (newCount) => {
     state.value.count = newCount;
     triggerRef(state); // 紧跟修改逻辑
   };

3. 避免 混用：不要在同一个变量的生命周期中频繁切换普通 ref 和 shallowRef，这会增加心智负担。

6. 批量更新优化

在某些极端性能要求的场景下，可能需要在循环或密集计算中修改多个属性。此时，triggerRef 的优势尤为明显。你可以修改数据 1000 次，但仅在最后调用一次 triggerRef。

实现 批量更新优化：

1. 循环 修改 shallowRef 对象的多个属性。
2. 等待 循环结束。
3. 调用 一次 triggerRef。

示例代码：

const heavyData = shallowRef({ items: Array(1000).fill(0) });

const performBatchUpdate = () => {
  // 1. 批量修改数据（此处不会触发视图渲染）
  for (let i = 0; i < heavyData.value.items.length; i++) {
    heavyData.value.items[i] = Math.random();
  }

  // 2. 所有计算完成后，一次性触发更新
  // 此时 Vue 只会执行一次渲染，而不是 1000 次
  triggerRef(heavyData);
};

这种方式避免了普通 ref 在每次循环赋值时都可能触发的昂贵依赖计算，极大地提升了运行时性能。