Vue - 你知道Vue中computed和watch的区别吗

难度级别：中高级及以上                               提问概率：70% 

---

二者都是用来监听数据变化的，而且在日常工作中大部分时候都只是局限于简单实用，所以到了面试中很难全面说出二者的区别。接下来我们看一下，二者究竟有哪些区别呢？

先说computed，它的主要用途是监听其他数据变更后，最终返回新的值；它内部包含set和get方法，当监听数据发生变化时，会调用内部的set方法，当业务组件中读取computed某个计算属性的时候，则会调用get方法；computed可以监听data数据依赖，也可以监听props数据；最重要的是由于computed内部的set/get机制，使得它具有缓存性，也就是说如果监听数据不发生变化的情况下，可以直接取缓存中的计算结果。

再说watch，watch的主要用途是监听某个数据变更后，根据值的变化具体做出一些业务逻辑上的处理，甚至可以发送异步请求；它接收两个参数，分别是newVal（更新后的新值）和oldVal（更新前的旧值），不过oldVal是非必须的；它可以监听data数据依赖，可以监听父组件传递过来的props数据，还可以监听computed计算属性值；由于watch的主要目的是做业务逻辑，那么它并不支持对数据的缓存；但需要注意的是，如果监听的是复杂数据类型，就需要在watch方法中添加deep属性，如果监听基本数据类型的变量则不需要添加deep属性。

所以，综合来看，computed监听一个或多个依赖值的变化，最终返回一个值；watch监听一个依赖值的变化，并且可以做出更多复杂的操作。

---

刷题思考

    其实computed和watch在使用上并不难，面试中除了将本小节的内容做为参考答案以外，computed内部是如何实现缓存的，这一点要着重了解一下。面试官不一定会让求职者当场写代码，但描述一下实现过程还是很有可能的。

---

类似考点

    这一节主要说的是组件内监听数据变化的相关知识，与之类似，面试官很可能还会问以下这些问题，例如页面中有一个区域，当这个区域滚动到页面顶部的时候就做吸顶处理，请问该如何实现？例如请知道computed内部实现缓存的工作原理吗？例如你知道watch中的deep属性有什么作用吗？