vue中的computed和watch区别
区别:
computed
1 它是基于data 或 props 中的数据通过计算得到的一个新值,这个新值根据依赖值的变化而变化;
2 在computed属性对象中定义计算属性的方法,和取data对象里的数据属性一样,以属性访问的形式调用;
3 computed 属性值是函数,那么默认会走 get 方法,必须要有一个返回值,函数的返回值就是属性的属性值;
4 computed属性值默认会缓存计算结果,在重复的调用中,只要依赖数据不变,直接取缓存中的计算结果,只有依赖型数据发生改变,computed 才会重新计算;
5 在computed中的,属性都有一个 get 和一个 set 方法,当数据变化时,调用 set 方法。
watch
1 主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看作是 computed 和 methods 的结合体;
2 可以监听的数据来源:data,props,computed内的数据;
3 watch支持异步;
4 不支持缓存,监听的数据改变,直接会触发相应的操作;
5 监听函数有两个参数,第一个参数是最新的值,第二个参数是输入之前的值,顺序一定是新值,旧值。
应用场景:
computed:用于处理复杂的逻辑运算;一个数据受一个或多个数据影响;用来处理watch和methods无法处理的,或处理起来不方便的情况。例如处理模板中的复杂表达式、表格或者趋势图里面的商品数量和总金额之间的变化关系等。
watch:用来处理当一个属性发生变化时,需要执行某些具体的业务逻辑操作,或要在数据变化时执行异步或开销较大的操作;一个数据改变影响多个数据。例如用来监控路由、inpurt 输入框值的特殊处理等。