优雅回答watch和computed的区别和选择？

一、问题剖析

watch和computed的区别以及选择？

其实这个问题在项目实战中很常见，面试官到底想考察我们什么？怎么去回答比较好，我个人觉得可以从以下四个方面去回答这个面试题。

• 先看看computed, watch两个的定义，并说一下使用上的差异？
• 在使用场景上的差异，怎么去选择？
• 一些使用上的细节、注意事项
• vue3代替vue2的变化

二、回：watch和computed的区别？

第一：先看看computed, watch两个的定义，并说一下使用上的差异？

听到这个第一就想起楚雨荨...

言归问题。

计算属性可以从组件数据产生出新的数据，经常的使用方式是设置一个函数，返回计算之后的结果。

可能面试官会突然问到computed和methods的区别？

computed和methods的差异是它具备缓存性，如果依赖项不变时不会重新计算。

侦听器可以检测某个响应式数据的变化并执行副作用，常见用法是传递一个函数，执行副作用，watch没有返回值，但可以执行异步操作等复杂逻辑。（一般用来请求接口）

第二：在使用场景上的差异，怎么去选择？

计算属性computed常用场景是简化在template模板中的复杂表达式，模板中出现太多逻辑判断会造成模板不易维护。

侦听器Watch常用场景是状态变化之后做一些异步操作。

至于选择哪种方案时，个人觉得有异步请求的用Wach，其他情况能用计算属性就首选计算属性。

第三：一些使用上的细节、注意事项

使用过程中有一些细节，比如计算属性可以成为既可读get又可写set的计算属性。watch可以额外设置deep、immediate等选项。

当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。但是这样会带来性能问题，优化的话可以使用字符串形式监听。

第四

vue3中watch选项发生了一些变化，例如不再能侦测一个点操作符之外的字符串形式的表达式；

作者并不是无脑的去掉该API功能，一个东西的离开必定有新事物的产生。

就如reactivity API中出现了watch、watchEffect可以取代vue2的watch选项。

面试官心里想：哎哟，我问你vue2，还会引申到vue3的角度回答，有点意思。

追问：说说computed的原理是什么？

小伙子还不错，基底还是可以的，让我继续看看你的深根扎实不。

其实，上面回答之后，这个问题就告一段落了，但也有面试官抓着问题不放，继续追问下去。

🙋那你说说computed的原理是什么？

vue 响应式原理

computed 原理，首先得讲 vue 响应式原理，因为 computed 的实现是基于 Watcher 对象的。 那么 vue 的响应式原理是什么呢？众所周知，vue 是基于 Object.defineProperty 实现监听的。在 vue 初始化数据 data 和 computed 数据过程中。会涉及到以下几个对象：

• Observe 对象（观察者）
• Dep 对象（订阅者）
• Watch 对象 Observe 对象是在 data 执行响应式时候调用，因为 computed 属性基于响应式属性，所以其不需要创建 Observe 对象。 Dep 对象主要功能是做依赖收集，有个属性维护多个 Watch 对象，当更新时候循环调用每个 Watch 执行更新。 Watch 对象主要是用于更新，而且是收集的重点对象。

computed的两种定义方式

这里谈到 computed 计算属性，首先要知道，其有两种定义方式。

一种是方法，另一种是 get，set 属性。而且，其内部监听的对象必须是已经定义响应式的属性，比如 data 的属性、vuex 的属性。

vue 在创建 computed 属性时候，会循环所有计算属性，每一个计算属性会创建一个 watch，并且在通过 defineProperty 定义监听，在 get 中，计算属性工作是做依赖收集，在 set 中，计算属性重要工作是重新执行计算方法，这里需要多补充一句，因为 computed 是懒执行，也就是说第一次初始化之后，便不会执行计算，下一次变更执行重新计算是在 set 中。

依赖收集的时机

另一个补充点是依赖收集的时机，computed 收集时机和 data 一样，是在组件挂载前，但是其收集对象是自己属性对应的 watch，而 data 本身所有数据对应一个 watch。

面试官摸了摸胡子，拍了拍我，明天来报道。

后记

所以知道为什么同样的问题，有的人可以拿10k，有的可以拿20k，都是在面试过程中体现，中级还是高级。

面试到最后，面试官：你还有什么想问的吗？如果前面有道题回答不上来的，我会在这个环节问一下面试官的思路。

问题不知道的就说不知道，强行乱七八糟的说，只会影响整个面试环节的整体。不会因为你这个问题没有涉及过而不要你，一般整个过程有两三道是你自己理解深入回答得不错的，80%过了。

孔子说过，知之为知之，不知为不知，是知也。来交个朋友呀，有朋自远方来，不亦乐乎呀！

👍 如果对您有帮助，您的点赞是我前进的润滑剂。