shallowRef适用于大型只读数据集整体替换和第三方库实例封装两类场景，仅在.value被重新赋值时触发更新，内部属性修改无响应，可配合triggerRef手动刷新。

shallowRef 用来创建一个只对 .value 本身赋值敏感的响应式引用，内部属性修改不触发更新。

什么时候该用 shallowRef

适合两类典型场景：

• 数据结构很深、但你只打算整体替换（比如换一整个用户对象），而不是频繁改其中某个字段
• 要包装一个第三方库实例（如 ECharts 图表对象、Monaco 编辑器、地图容器），避免 Vue 对其内部成千上万个属性做 Proxy 劫持导致卡顿或崩溃

基本写法和关键行为

用法和 ref 完全一样，只是响应范围不同：

const user = shallowRef({ name: 'Alice', profile: { avatar: '' } })

这时只有下面的操作会触发视图更新：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

立即学习“前端免费学习笔记（深入）”；

• user.value = { name: 'Bob' } ✅（顶层替换）
• user.value.profile.avatar = 'new.png' ❌（深层修改，无响应）

和 ref 的核心区别

ref 会对传入的对象自动调用 reactive，变成深度响应；shallowRef 则跳过这一步，保留原始对象结构：

• ref({ a: { b: 1 } }).value.a.b = 2 → 触发更新
• shallowRef({ a: { b: 1 } }).value.a.b = 2 → 完全静默，不更新也不报错

配合 triggerRef 手动通知更新

如果你确实改了深层属性，又希望强制刷新，可以调用 triggerRef：

user.value.profile.avatar = 'updated.png'
triggerRef(user)

这相当于告诉 Vue：“虽然我没监听这个字段，但请你重新渲染一次”。