shallowref 创建仅对 .value 本身响应的引用，修改其嵌套属性不触发更新，需用 triggerref 手动通知依赖重新求值；它只作用于 shallowref，用于保留引用且避免深度响应开销的场景。
在 Vue 3 中，shallowRef 用于创建一个只对 .value 本身做响应式、不递归代理内部属性的引用。但这也带来一个问题：当你修改 shallowRef.value 的某个嵌套属性时（比如 shallowRef.value.name = 'Alice'），视图不会自动更新——因为响应式系统根本没追踪到这个变化。
triggerRef：手动通知视图重新渲染
triggerRef() 是专门为此设计的工具函数。它会强制触发依赖该 shallowRef 的所有副作用（如组件渲染、watchEffect 等），相当于“告诉 Vue：这个 shallowRef 虽然没变，但它内部内容变了，请重新读取并更新。”
- 它只对
shallowRef有效，对普通 ref 或 reactive 对象无效 - 调用后，组件中访问该 shallowRef.value 的地方会重新求值，触发 DOM 更新
- 不需要传新值，也不改变原始值，只是“刷新依赖”
什么时候必须用 triggerRef？
典型场景是操作大型不可变数据或第三方库对象（如 Three.js 场景、Canvas 上下文、Map/Set 实例等），你希望避免深度响应式开销，又需要修改后视图同步。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 修改 shallowRef.value 的属性但未替换整个 value（如
state.obj.count++） - 通过外部库方法修改了对象内部状态（如
chartInstance.resize()） - 使用 Object.assign 或解构赋值更新了 shallowRef.value 的部分字段
正确用法示例
✅ 推荐写法：
import { shallowRef, triggerRef } from 'vue'
const userInfo = shallowRef({ name: 'Tom', age: 25 })
// 直接改内部属性 → 不触发更新
userInfo.value.age = 26
// 手动触发更新
triggerRef(userInfo)
❌ 错误写法：
-
userInfo.value = { ...userInfo.value, age: 26 }—— 这样虽能更新，但丢失了原对象引用，可能破坏外部依赖 -
triggerRef(userInfo.value)—— 参数错误，必须传 shallowRef 本身 - 对普通 ref 调用 triggerRef —— 无效果，控制台可能报 warning
和 shallowReactive 的区别
shallowReactive 代理的是对象，其直接属性变更可被侦测（如 obj.count = 10），但深层属性仍不响应；而 shallowRef 包一层 .value，连直接属性变更都不可见，所以更需要 triggerRef 主动唤醒。
- 想保留对象引用 + 控制响应粒度 → 选 shallowRef + triggerRef
- 想简化写法且只关注顶层属性 → 可考虑 shallowReactive
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
