shallowref的核心是只监听.value引用本身的变化，不追踪内部属性修改；适用于大对象整体替换、第三方库数据、配置切换等场景，配合triggerref可手动触发更新。
用 shallowRef 创建浅层响应式数据，核心是：只监听 .value 引用本身的变化，不深入追踪内部属性的修改。
什么时候该用 shallowRef
当你有对象或数组，但只关心它“被整体替换”这个动作，而不是其中某个字段的变更时，就适合用 shallowRef。比如表单重置、配置切换、第三方库返回的数据对象等场景。
- 原始值（如字符串、数字）用
ref或shallowRef效果一样，都响应 - 对象或数组用
ref会递归转为响应式；用shallowRef则只对.value这一层做响应式 - 修改
shallowRef.value.xxx不会触发更新；只有赋新值给shallowRef.value才会
基本写法和效果对比
假设你有一个用户信息对象：
import { ref, shallowRef } from 'vue'
const userRef = ref({ name: '张三', age: 25 })
const userShallow = shallowRef({ name: '张三', age: 25 })
// ✅ 以下操作都会触发视图更新（因为是 .value 整体变）
userRef.value = { name: '李四', age: 26 }
userShallow.value = { name: '李四', age: 26 }
// ❌ 以下操作仅对 ref 生效，shallowRef 不响应
userRef.value.name = '王五' // 触发更新
userShallow.value.name = '王五' // 不触发更新（内部属性无响应式）
配合 triggerRef 主动通知更新
如果你确实需要在不替换整个对象的前提下，让 shallowRef 的副作用（比如 watchEffect）重新执行，可以用 triggerRef 手动触发：
- 适用于你用
shallowRef存了一个大对象，又通过某些逻辑（如外部库、深拷贝后赋值）改了它的内部字段 - 调用
triggerRef(shallowRef)后，所有依赖它的计算或侦听器会重新运行
import { shallowRef, watchEffect, triggerRef } from 'vue'
const data = shallowRef({ msg: 'hello' })
watchEffect(() => {
console.log('data changed:', data.value.msg)
})
// 修改内部属性（不会自动触发）
data.value.msg = 'world'
// 手动触发更新
triggerRef(data) // → 控制台输出 "data changed: world"
常见搭配建议
- 与
toRaw配合：需要把 shallowRef 包裹的对象传给非 Vue 环境（如 Canvas、ECharts）时，先toRaw(shallowRef.value)拿原始对象，避免代理干扰 - 避免与
reactive混用：shallowRef 的 value 是普通对象，不要把它直接塞进 reactive，否则失去浅层特性 - 组件 props 接收大型只读对象时，可用 shallowRef +
readonly组合，兼顾性能与安全性
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
