Vue 计算属性与侦听器：高效处理派生状态与副作用

快速概述

在 Vue 开发中，模板内直接编写复杂表达式会导致逻辑臃肿且难以维护。计算属性（computed）与侦听器（watch）正是为解决此问题而生：前者用于高效处理派生状态（由已有数据计算得出的值），后者用于响应数据变化并执行副作用（如异步请求、DOM 操作）。适用场景包括数据格式化、列表过滤、联动更新等。前置环境要求：Vue 3.x（Composition API 或 Options API）或 Vue 2.6+，Node.js 环境已配置。

核心概念与原理

计算属性基于响应式依赖进行缓存——只有依赖的响应式数据发生变化时才会重新求值，否则直接返回缓存结果。其本质是一个惰性求值的 getter，适合同步、纯函数式的数据转换。侦听器则更关注数据变化后的“动作”，不缓存结果，每次变化都会触发回调，适合执行异步或开销较大的操作。设计模式上，应遵循“能用 computed 解决的问题不用 watch”原则，因为 computed 声明式且无副作用，更易测试与维护。

实战步骤与代码

步骤一：基础计算属性

// 使用 Composition API 实现购物车总价计算
import { ref, computed } from 'vue';
const price = ref(100); const quantity = ref(2);
// 计算属性：根据依赖自动更新并缓存 const total = computed(() => price.value * quantity.value);
console.log(total.value); // 200

步骤二：可写计算属性

// 实现双向绑定的派生状态
const firstName = ref('张');
const lastName = ref('三');
const fullName = computed({ get: () => firstName.value + ' ' + lastName.value, set: (newVal) => { [firstName.value, lastName.value] = newVal.split(' '); } });
fullName.value = '李 四'; console.log(firstName.value); // 李

步骤三：侦听器处理异步副作用

// 监听搜索关键词变化，防抖后请求接口
import { ref, watch } from 'vue';
const keyword = ref(''); const results = ref([]);
watch(keyword, async (newVal, oldVal) => { if (newVal === oldVal) return; // 值未变化时跳过 // 模拟异步请求 const data = await fetch(`/api/search?q=${newVal}`).then(r => r.json()); results.value = data; }, { debounce: 300 }); // 注意：debounce 需自行实现或使用工具库

常见坑点与优化

• 滥用 watch 导致性能下降：能用 computed 表达的派生值不要用 watch 手动赋值，避免冗余更新与额外渲染。
• 计算属性内执行副作用：computed 必须是纯函数，若在其中修改其他状态会引发无限循环警告（Maximum recursive updates exceeded）。
• 深度监听陷阱：使用 watch(obj, cb, { deep: true }) 会递归遍历对象，开销大；建议监听具体属性路径或使用 getter 函数。
• 异步更新问题：watch 回调中修改数据需注意 Vue 的异步批量更新机制，必要时使用 nextTick 获取最新 DOM。
• 立即执行与清理：使用 immediate: true 让侦听器在创建时立即执行；在组件卸载时，Vue 会自动停止侦听，但手动创建的侦听器需调用返回的停止函数。

性能优化建议：优先组合 computed 形成数据流；对高频触发的事件（如输入）使用防抖或节流；避免在 watch 中做重计算，可将其委托给 computed 或 Web Worker。