shallowRef适用于只需顶层赋值触发更新、避免深层代理开销的场景，如大型只读数据、第三方库实例或缓存JSON；修改内部属性不响应，需配合triggerRef手动刷新。
在 Vue 3 中，shallowRef 是专为“只关心顶层赋值、不希望深层代理开销”场景设计的 API。它不递归处理嵌套属性，因此对大型对象（如含成百上千项的列表、复杂配置、第三方库返回的实例）能显著减少初始化时间和内存占用。
什么时候该用 shallowRef？
核心判断标准：你是否只需要在 整个对象被替换时才触发更新，而对内部字段（比如 obj.items[0].name 或 obj.user.profile.avatar）的修改完全不关心响应式行为？如果是，shallowRef 就比 ref 更合适。
- 加载了上万条数据的表格原始数据，但仅通过分页/筛选整体切换
- 集成第三方图表库（如 ECharts 实例），只需响应式控制其是否挂载/销毁，不监听内部状态变化
- 缓存服务端返回的完整 JSON 响应体，后续只做只读展示或手动 deep clone 后再改
怎么写？基础用法和关键细节
导入并创建即可，语法与 ref 一致，但行为不同：
import { shallowRef } from 'vue'
<p>// ✅ 正确：大对象直接传入，不深度转换
const bigList = shallowRef({
total: 12847,
items: Array.from({ length: 10000 }, (_, i) => ({
id: i,
title: <code>Item ${i}</code>,
metadata: { /<em> 深层嵌套，但不会变成 reactive </em>/ }
}))
})</p><p>// ✅ 修改顶层引用 → 触发更新
bigList.value = { total: 500, items: [] }</p><p>// ❌ 修改内部属性 → 不触发任何响应式副作用
bigList.value.items.push({ id: 99999, title: 'New' }) // 无反应
bigList.value.items[0].title = 'Edited' // 无反应
如果真要改内部属性并让视图更新怎么办？
不能靠自动响应，但 Vue 提供了明确的补救方式：triggerRef。它相当于“手动拍一下”，通知所有依赖这个 shallowRef 的地方重新执行。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 适合在批量修改后统一刷新，而不是每改一个字段都触发一次
- 常配合
watchEffect或计算属性使用
import { shallowRef, triggerRef, watchEffect } from 'vue'
<p>const state = shallowRef({ count: 0, list: [] })</p><p>watchEffect(() => {
console.log('state changed:', state.value.count)
})</p><p>// 直接改内部，不触发
state.value.count++
state.value.list.push('item')</p><p>// 手动触发更新
triggerRef(state)
和 ref / shallowReactive 怎么选？
简单对照帮你快速决策：
- 要用
.value访问（比如包装基本类型或需统一接口）→ 选shallowRef - 是纯对象、想直接点属性（如
obj.name）且只要第一层响应 → 选shallowReactive - 数据小、结构简单、需要任意一层修改都自动更新 → 回归
ref或reactive
性能上：shallowRef 初始化最快，shallowReactive 次之，ref 和 reactive 对大对象会明显变慢。
