一上午敲代码敲得手指发麻、脑袋发胀？好不容易迎来午休时光，别让紧绷的神经继续 “加班” 啦！来，花上十分钟，和我一起唠唠 Vue 里一道超高频的面试题 ——watch 和 computed 到底有啥区别？什么时候该用谁？ 别被这些专业术语唬住，咱们就像聊生活趣事一样，把它们的 “脾气秉性” 摸得透透的，轻松拿下这个知识点，下次面试遇到直接稳操胜券！

computed：默默算账的 “智能小会计”

先来说说 computed，它就像你身边默默算账的 “智能小会计”。比如你在做一个购物车结算页面，需要实时展示商品总价，而商品单价和数量又会随时变化。要是每次数据变动都手动去计算总价，不仅麻烦，还容易出错。这时候 computed 就派上用场了！它会自动 “盯梢” 依赖的数据（单价和数量），一旦这些数据有变化，就立刻重新计算总价，而且还会把计算结果缓存起来，只有依赖的数据变了才会重新算，超省性能！

export default {
data() {
return {
productPrice: 50, // 商品单价
productQuantity: 3 // 商品数量
};
},
computed: {
totalPrice() {
// 计算商品总价，依赖productPrice和productQuantity
return this.productPrice * this.productQuantity;
}
}
};

在上面这段代码里，totalPrice就是 computed 计算属性。只要productPrice或productQuantity一更新，它就会自动算出新的总价。而且，如果在模板里多次使用totalPrice，只要依赖的数据没变动，它就直接返回缓存结果，不用反复计算，是不是超智能？

watch：时刻待命的 “贴心小管家”

再聊聊 watch，它更像是时刻待命的 “贴心小管家”。假设你在做一个用户信息编辑页面，当用户修改完邮箱地址后，你想立刻给用户发送一封验证邮件，这时候 watch 就大显身手了。它能专门 “监听” 某个数据（比如邮箱地址）的变化，一旦数据有变动，就马上执行你提前写好的操作（发送邮件），而且还能拿到数据变化前后的值，方便你做各种复杂处理。

export default {
data() {
return {
userEmail: 'old@example.com' // 用户邮箱地址
};
},
watch: {
userEmail(newValue, oldValue) {
// 当userEmail变化时触发
console.log(`邮箱地址从 ${oldValue} 变成了 ${newValue}`);
// 模拟发送验证邮件的异步操作
setTimeout(() => {
console.log('已发送邮箱验证邮件');
}, 1000);
}
}
};

在这段代码中，watch对象里的userEmail就是侦听器。只要userEmail的数据发生变化，它就会触发回调函数，不仅能知道新值是多少，还能对比旧值，像发送邮件、记录操作日志这类复杂任务，它都能轻松搞定。

到底该用 watch 还是 computed？场景大揭秘

• computed 适用场景：当你需要基于现有数据进行简单的、同步的计算，并且希望结果被缓存以提升性能时，就选 computed。比如计算购物车总价、根据多个数据拼接展示字符串、判断某个复杂条件等，只要依赖数据不变，它就能快速返回结果。
• watch 适用场景：如果你要处理异步操作（比如发送网络请求、定时器任务）、在数据变化时执行复杂的业务逻辑、或者需要在数据变化前后做一些额外操作（如记录旧数据、通知其他模块），这时候 watch 就是最佳拍档。

面试题回答范本

当面试官问：“watch 和 computed 有啥区别？什么时候该用谁？” 你可以这样回答：

watch 和 computed 虽然都能处理数据变化，但它们的 “分工” 不太一样。computed 就像个智能小会计，专门负责基于现有数据做简单的同步计算，还会把结果缓存起来，省性能又高效，适合计算总价、拼接字符串这类需求。

而 watch 更像贴心小管家，它会死死盯着某个数据，一旦数据有变动，不管是执行异步任务，还是跑复杂的业务逻辑，都能立马响应，而且还能拿到变化前后的数据，特别适合做数据变化后的深度处理。

简单来说，想高效计算结果就用 computed，想处理数据变化后的复杂操作就选 watch，根据实际需求灵活切换就好！

最后留个小话题：在实际项目里，你有没有因为用错 watch 和 computed 踩过坑？你觉得哪个用起来更顺手？快来评论区分享你的实战经验，咱们一起唠唠 Vue 开发中的那些 “爱恨情仇”！

午休时光转瞬即逝，这十分钟是不是让你对这俩知识点豁然开朗？下次面试遇到相关问题，直接胸有成竹应答！觉得文章有用，别忘了点赞、关注，每天中午准时带你拆解 Vue 面试题，轻松进阶技术大神！