Vue watch 和 computed 的区别？

[lhlGitHub]

[Moannas]

computed ：
是计算属性，它会根据你所依赖的数据动态显示新的计算结果
1、支持缓存，只有依赖数据发生改变，才会重新进行计算
2、 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5、如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法
watcher：
1、不支持缓存，数据变，直接会触发相应的操作；
2、watch支持异步；
3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4、当一个属性发生变化时，需要执行对应的操作；一对多；
5、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。
注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
如果一个数据需要经过复杂计算就用 computed
如果一个数据需要被监听并且对数据做一些操作就用 watch

[zhanglongLee]

共同点：

watch和computed都是以Vue的依赖追踪机制为基础

不同点：

1、计算属性依赖computed watcher、watch监听依赖的是user watcher。
2、定义方式不同，计算属性本质上是get/set形式，即使写成函数形式，Vue底层也会规范化为get/set形式。而watch提供的是一个回调函数。
3、可取消性不同，计算属性一旦依赖，无法取消，也就是说定义后无法更改其get函数，而使用$watch方法实现的监听它返回一个unwatch可随时取消，取消后当数据再次发生变动时，不会再执行我们的回调函数。
4、时效性不同，计算属性的值会缓存，依赖数据不发生改变，computed会返回缓存的值。对于watch而言，只要我们的响应式变量发生了变化，就会执行回调函数。
5、computed不支持异步，watch支持异步操作。

应用场景

computed：用于处理复杂的逻辑运算；一个数据受一个或多个数据影响；用来处理watch和methods无法处理的，或处理起来不方便的情况。例如处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。
watch：用来处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作，或要在数据变化时执行异步或开销较大的操作；一个数据改变影响多个数据。例如用来监控路由、inpurt 输入框值的特殊处理等。

参考文章

• Vue中computed和watch的区别
• 第 146 题：Vue 中的 computed 和 watch 的区别在哪里

[yanggengzhen123]

区别：

1、computed是计算属性，是根据它所依赖的属性来变化的，是其他属性计算出来的。watch是监听某个值的变化。
2、computed必须return。watch不用。
3、computed具有缓存功能，只有当依赖数据发生改变时才会触发，watch可以进行深度监听和立即监听。