computed. Watch和methods的区别

233 阅读2分钟

1.watch为侦听属性,其中它的作用主要是用于监听数据中的变化,可以监听的数据来源有:data props,computed中的值

当你使用它对对象属性进行监听的时候可以采用深度监听deep immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行

2.watch还可以监听$route路由变化时的一个操作

3.watch中的两个参数(newValue,oldValue) 一个是新值一个是旧值

computed

computed为计算属性,故名思意computed是用于用于处理复杂逻辑的计算 computed中储存着需要计算的值 只有在改变时才去执行, Vue会记住计算的属性所依赖的值。通过这样做,Vue只有在依赖变化时才可以计算值。否则,将返回以前缓存的值

与methods相比

使用methods和使用computed结果可能是相同的但是性能将遭受毁灭性的打击 在Vue中计算属性是基于它们的依赖值进行缓存的,而方法是不会基于它们的依赖进行缓存的。 假设我们有一个性能开销比较大的的计算属性A,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

使用场景

例如购物车中的商品和总金额之间的关系,商品的增加和删除都会对总金额有影响 那么我们就可以利用computed 返回一个总金额的计算结果值