triggerRef() 手动触发浅层 ref 更新

最后更新：2026-10-22

triggerRef() 手动触发与 shallowRef 关联的副作用：内部改动 Vue 追踪不到时用它补一次通知。

📝 语法

big.value.list.push(1)  // 不触发
triggerRef(big)          // 手动补触发

shallowRef	需要触发更新的浅层 ref

返回值：无

修改下面的代码，在预览区实时查看效果：

输出：

每次点击长度递增（没有 triggerRef 只会停在 1）。

⚠️ 注意 只在浅层 ref / 浅层响应式上需要：深层的普通 ref 自动追踪，不必手动补。

ℹ️ 说明 外部可变数据源（如第三方库内部状态）改动后用它能同步到 UI。

更多案例即将上线。

Q 能用它替代整体替换吗？

A 可以，但整体替换语义更清晰、也更符合响应式心智模型；triggerRef 是补丁手段。

Q 对普通 ref 用它有什么效果？

A 功能上也会触发一次更新，但通常没必要。

Q 会引起额外渲染吗？

A 会：每次都触发相关副作用，频繁调用要谨慎。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。