Vue响应式API需按数据特性选型：ref用于基础类型及需引用稳定场景，reactive处理结构稳定的对象，shallowRef和markRaw用于性能敏感或第三方库集成，effectScope管理动态副作用生命周期。
Vue.js 响应式 API 的使用不是“选对函数就行”，而是要匹配数据特性、更新频率和副作用范围。核心在于：用 ref 管理基础类型和需要显式解包的引用；用 reactive 处理普通对象与数组；在性能敏感或集成外部库时，主动用 shallowRef 和 markRaw 切断不必要的响应式追踪。
ref 与 reactive 的分工要清晰
ref 不只是“给基本类型用的”，它本质是创建一个带 .value 的响应式容器，适合以下场景：
- 需要保持引用稳定性（比如作为 watch 的源或传入子组件 props）
- 值可能被频繁替换（如分页数据、表单重置）
- 模板中直接使用时希望自动解包（
{{ count }}而非{{ count.value }}）
reactive 更适合结构稳定、属性访问频繁的对象：
- 用户信息、配置对象、表单模型等深层嵌套但整体不常替换的数据
- 避免 ref 套 reactive（
ref(reactive({}))）——既冗余又增加取值成本 - 注意 reactive 对 新增属性 默认不响应，需用
Vue.set或reactive初始化完整结构
避免响应式污染：markRaw 是安全阀
第三方库实例（如 Chart.js 图表、Map 实例、WebSocket 连接）、大型静态数据集、或手动管理生命周期的对象，都不该被 Vue 自动转为响应式。否则会带来性能开销甚至报错。
立即学习“前端免费学习笔记（深入）”；
- 用
markRaw()包裹后再赋值给 ref 或 reactive 字段，确保其内部变更不触发依赖更新 - 常见误用：把未 markRaw 的第三方实例直接放进 reactive 对象里，导致 Vue 尝试代理不可代理对象（如 Date、RegExp）而报错
- markRaw 后的对象仍可正常读写，只是脱离响应式系统追踪
按需浅层响应：shallowRef 的适用边界
shallowRef 的价值不在“省一点性能”，而在于语义明确：你只关心这个引用是否被整体替换，不关心它内部怎么变。
- 典型场景：图表数据集（
shallowRef(chartData)），每次更新都整份替换，无需监听 data[0].value 变化 - 搭配 markRaw 使用更稳妥：
shallowRef(markRaw(largeObject))，既避免深度代理，又防止意外响应 - 慎用于需 watch 内部属性的场景——若真要监听深层变化，改用 reactive 或加
{ deep: true }选项
effectScope：管理副作用生命周期的隐形助手
在动态创建响应式逻辑（如可插拔模块、条件加载的业务逻辑块）时，effectScope 能帮你统一停用、恢复、清理所有关联的 effect、watch、computed。
- 避免内存泄漏：组件卸载前调用
scope.stop()，自动清除所有注册的响应式副作用 - 适用于封装可复用的组合式函数（composable），尤其涉及异步请求 + watch + computed 的复杂逻辑链
- 不推荐全局滥用——多数场景下组件自身的 onUnmounted 钩子已足够；仅在跨组件/动态逻辑管理时体现价值
