在 Vue 中，computed、watch 和 methods 是核心的响应式特性，三者在功能、使用场景和底层机制上有明显区别，面试时需重点突出核心差异和适用场景。
一、methods：普通方法，主动调用
核心作用：定义组件内的方法，通过事件绑定（如 @click）或主动调用（如 this.methodName()）触发执行。
特点：
无缓存：每次调用都会重新执行函数体，无论依赖数据是否变化。
可传参：支持自定义参数，灵活性高。
无副作用限制：可执行任意逻辑（包括修改数据、发起请求等）。
适用场景：
事件处理（如点击、提交表单）。
需要主动调用且依赖外部参数的逻辑（如
this.formatDate(timestamp)）。不需要缓存的纯函数或复杂操作。
示例：
methods: {
handleClick() {
this.count++; // 修改数据
},
formatDate(timestamp) {
return new Date(timestamp).toLocaleString(); // 传参处理
}
}二、computed：计算属性，依赖驱动+缓存
核心作用：基于依赖数据（如 data、props）动态计算并返回一个新值，具有缓存特性。
特点：
缓存机制：只有当依赖数据变化时，才会重新计算；否则直接返回缓存结果，性能优于
methods。不可传参：默认基于响应式依赖自动计算，不支持手动传参（可通过闭包间接实现，但不推荐）。
getter/setter：默认是
getter，可定义setter实现双向绑定（如v-model绑定计算属性）。无副作用：应避免在
getter中修改依赖数据（会破坏响应式追踪）。
适用场景：
派生状态：当一个数据需要依赖其他数据计算得出（如
fullName依赖firstName和lastName）。需要缓存的复杂计算（如过滤列表、格式化数据）。
示例：
computed: {
fullName() {
// 依赖 firstName/lastName 变化时才重新计算
return `${this.firstName} ${this.lastName}`;
},
// 带 setter 的计算属性
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value) {
const [first, last] = value.split(' ');
this.firstName = first;
this.lastName = last;
}
}
}三、watch：侦听器，响应数据变化+执行副作用
核心作用：监听特定数据（如 data、props、route）的变化，触发回调函数执行异步或开销较大的操作（如 AJAX 请求、DOM 操作）。
特点：
无缓存：仅监听数据变化，不返回新值，专注于执行副作用逻辑。
支持异步：回调中可执行异步操作（如
axios请求），computed不支持（需同步返回）。深度监听：可通过
deep: true监听对象内部属性变化（性能开销大，慎用）。立即执行：可通过
immediate: true在组件初始化时立即触发一次回调（默认是变化后才触发）。获取新旧值：回调参数接收
newVal和oldVal（对象类型时，oldVal和newVal引用相同，需深拷贝才能获取旧值）。
适用场景：
数据变化后执行异步操作（如搜索框输入变化时发请求）。
监听路由/状态变化（如
this.$route变化时更新数据）。需要在数据变化时执行复杂逻辑（且不需要返回新值）。
示例：
watch: {
// 监听基本类型
keyword(newVal, oldVal) {
this.debounceFetchData(newVal); // 防抖发请求
},
// 监听对象（需 deep:true）
userInfo: {
handler(newVal) {
console.log('用户信息变化', newVal);
},
deep: true, // 深度监听
immediate: true // 初始化时立即执行
}
}四、核心区别总结
面试加分点
性能优化：
computed的缓存特性可避免重复计算，适合频繁访问的派生数据；methods无缓存，频繁调用可能影响性能。场景选择：能用
computed就不用watch（computed更简洁，符合声明式编程）；当需要执行异步或副作用时，才用watch。细节注意：
watch监听对象时，deep: true会遍历对象所有属性，性能差，可改用字符串形式监听具体属性（如'userInfo.name'）。
通过清晰区分三者的核心机制和适用场景，能体现对 Vue 响应式原理的深入理解。