计算属性适用于同步派生值，具缓存性且无副作用；侦听器适用于响应变化执行异步或副作用操作；多级对象可精准监听路径；计算属性天然支持多依赖联动；禁止在计算属性中执行异步操作。
当在 Vue 应用中需要对响应式数据进行逻辑处理或响应变化时，计算属性（computed）与侦听器（watch）是两个核心机制。它们虽都基于响应式系统，但触发时机、执行方式与适用边界存在本质差异。以下是针对不同使用场景的详细展开：
一、计算属性适用于派生值的同步、无副作用转换
计算属性用于声明式地定义一个依赖于其他响应式数据的只读派生值，其结果被缓存，仅在依赖项变更时重新求值。它不执行异步操作，也不引发状态变更，适合模板中直接渲染或作为中间逻辑桥接。
1、在 Vue 实例的 computed 选项中定义函数，函数必须返回值，且内部仅访问响应式数据。
2、在模板中以插值语法 {{ propertyName }} 直接使用，无需调用括号。
立即学习“前端免费学习笔记（深入）”；
3、若需支持赋值，则采用完整写法，显式声明 get 和 set 函数，set 中仅修改原始依赖数据，不直接变更计算属性本身。
二、侦听器适用于响应变化执行副作用操作
侦听器用于在特定响应式数据变更时，主动执行异步任务、DOM 操作、API 调用或复杂状态同步等具有副作用的逻辑。它不返回值，不参与模板渲染，强调“变化即动作”。
1、在 Vue 实例的 watch 选项中声明监听字段，键名为目标响应式路径（如 'user.name' 或 'items.length'）。
2、为该字段提供处理函数，接收 newValue 和 oldValue 两个参数，可据此判断变化方向或条件执行。
3、如需监听嵌套对象内部变化，设置 deep: true；如需组件初始化时立即触发一次，添加 immediate: true 配置项。
三、多级对象属性的精准监听方案
当需响应对象某单一深层字段（如 user.profile.avatarUrl）而非整个对象时，直接监听字符串路径可避免深度监听带来的性能开销，并确保仅在目标字段变更时触发。
1、在 watch 中以点分隔路径形式书写键名：'user.profile.avatarUrl'。
2、省略 deep 配置，保留默认浅监听行为，提升响应效率。
3、处理函数内可直接使用 newValue 进行资源加载、校验或日志记录等操作。
四、依赖多个响应式源的组合计算
计算属性天然支持同时依赖多个 data 或 props 属性，只要其中任一依赖更新，计算属性即自动重求值并更新视图，无需手动管理依赖关系或触发更新逻辑。
1、在 computed 函数体内，直接读取多个响应式变量，例如 this.firstName + ' ' + this.lastName。
2、该表达式被整体视为一个依赖图节点，Vue 自动追踪所有被访问的响应式属性。
3、在模板中绑定该计算属性名称，即可实现零手动同步的联动显示。
五、避免在计算属性中执行异步操作
计算属性的 getter 必须是同步且无副作用的纯函数。若在其中发起 API 请求、使用 setTimeout 或修改 this.data，将导致响应式链断裂、缓存失效或不可预测的渲染行为。
1、识别异步代码特征：包含 Promise、async/await、setTimeout、fetch 等关键字。
2、将此类逻辑迁移至侦听器或生命周期钩子中，确保副作用被明确控制。
3、如需根据输入动态获取远程数据并展示，应使用 watch 监听输入字段，再在 handler 中调用 API 并更新本地 data 属性。
