vue 中 computed 和 watch 的区别

　　watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，当某一个依赖型数据(依赖型数据：简单理解即放在 data 等对象下的实例数据)发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。

　　当依赖的值变化时，在 watch 中，是可以做一些复杂的操作的，而 computed 中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。

　　应用场景：

　　computed：用于处理复杂的逻辑运算;一个数据受一个或多个数据影响;用来处理 watch 和 methods 无法处理的，或处理起来不方便的情况。例如处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。

　　watch：用来处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作，或要在数据变化时执行异步或开销较大的操作;一个数据改变影响多个数据。例如用来监控路由、inpurt 输入框值的特殊处理等。

　　区别：

　　computed

　　初始化显示或者相关的 data、props 等属性数据发生变化的时候调用;

　　计算属性不在 data 中，它是基于 data 或 props 中的数据通过计算得到的一个新值，这个新值根据已知值的变化而变化;

　　在 computed 属性对象中定义计算属性的方法，和取 data 对象里的数据属性一样，以属性访问的形式调用;

　　如果 computed 属性值是函数，那么默认会走 get 方法，必须要有一个返回值，函数的返回值就是属性的属性值;

　　computed 属性值默认会缓存计算结果，在重复的调用中，只要依赖数据不变，直接取缓存中的计算结果，只有依赖型数据发生改变，computed 才会重新计算;

　　在 computed 中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。

　　watch

　　主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是 computed 和 methods 的结合体;

　　可以监听的数据来源：data，props，computed 内的数据;

　　watch 支持异步;

　　不支持缓存，监听的数据改变，直接会触发相应的操作;

　　监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新值，旧值。

上一篇

ribbon和feign区别