Vue响应式系统需主动做减法：computed缓存纯派生结果，watch处理异步高开销动作，reactive手动控制更新粒度，composable封装可复用逻辑。

Vue.js 响应式系统在复杂逻辑运算中不是“越响应越好”，而是需要主动做减法——核心在于区分哪些数据该响应、哪些计算该缓存、哪些副作用该延后。关键不是回避复杂逻辑，而是把不同性质的逻辑交给最适合的机制处理。

用 computed 缓存纯派生结果，避免重复执行

当逻辑是确定性、无副作用、且被模板或其它 computed 频繁读取时，computed 是最优解。它只在依赖变更时重新求值，并自动缓存结果。

• 适合场景：多条件组合筛选（如商品列表按价格+分类+标签三级过滤）、表单字段联动校验（邮箱格式正确 + 密码强度达标 → 提交按钮启用）
• 注意点：不要在 computed 中发请求、修改 ref、操作 DOM；若内部有 if 分支，确保所有可能影响结果的响应式字段都被实际访问到，否则依赖追踪会漏掉
• 技巧：对深层嵌套对象做扁平化预处理（如把 user.profile.address.city 提前映射为 userCity），减少 Proxy 的嵌套代理开销

用 watch 处理异步或高开销动作，控制触发时机

当变化需要触发网络请求、本地存储、批量渲染或复杂算法（如图表重绘、文本分词）时，watch 更合适。它不缓存，但支持节流、防抖、深度监听和清理机制。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 适合场景：搜索框输入后 300ms 节流调用 API；富文本编辑器内容变更后写入 localStorage；路由参数变化时重置子组件状态
• 注意点：watch 默认不监听对象内部变化，需显式加 deep: true；避免在回调里直接改被监听的源数据，防止无限循环
• 技巧：配合 watch 返回的清除函数，取消上一轮未完成的请求（如 Axios Cancel Token），避免陈旧响应覆盖新状态

用 reactive + 手动控制更新粒度，减少无效追踪

不是所有数据都值得进响应式系统。对静态配置、大型只读数据集、计算中间结果，应主动隔离响应性，降低依赖收集与通知成本。

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

• 冻结静态结构：config: Object.freeze({ apiHost: 'https://api.example.com', timeout: 5000 })
• 分离计算中间态：将耗时的 transform 步骤放在 watch 或方法中执行，只把最终结果用 ref 暴露给视图
• 避免过度嵌套：深层嵌套对象会增加 Proxy 代理层级和依赖追踪路径，优先用扁平结构或用 toRefs 拆解后再响应化

用 composable 封装可复用逻辑，统一响应性边界

跨组件共享复杂计算逻辑时，不能每个组件都定义一遍 computed —— 这会导致多份独立响应式链路和重复计算。应通过自定义 Hook 统一管理依赖与缓存。

• 封装原则：接收 ref/ reactive 作为输入，返回 computed 或 ref，保持响应性链路完整
• 共享方案：高频共用逻辑（如权限判断、国际化翻译）放 Pinia store 内部用 computed 定义；轻量逻辑可用 provide/inject 提供基础数据，各组件再做局部计算
• 类型保障：为 composable 添加 TypeScript 接口，明确输入输出，避免解构 ref 导致响应性丢失