watch、methods、computed的区别

119 阅读1分钟

一. watch、methods、computed的概念

1.computed

计算辰性将被混入到 vue 实例中。所有 getter 和setter 的this 上下文自动地鄉定为 vue 实例。

2.methods

methods 将被混入到 Vue 实例中。可以直接通过 V 实例访问这些方 法,或者在指令表达式中使用。方法中的 this 自动鄉定为 vue 实例。

3.watch

观察和响应 vve 实例上的数据变动,一个对象,键是需要观察的表达式,值是对应回调两数。值也可以是方法名,或者包含选项的对象,vue 实例将会在实例化时调用 swatch0,遍历watch 对象的每一个屈性。

二. 三者的加载顺序

1.computed 是在HTML DOM 加载后马上执行的,如赋值:(屆性将被混入到 vue 实例) 2.methods 则必须要有一定的触发条件才能执行,如点击事件 3.watch 呢?它用于观察vue 实例上的数据变动。

三. 默认加载的时候

先 computed 再watch,不执行 methods:

四. 触发某一事件后

先 computed 再methods 再到watch computed 屈性 vs method 方法 computed 计算属性是基于它们的依赖进行缓存的。

总结

计算属性 computed 只有在它的相关依赖发生改变时才会重新求值,当有 个性能开销比较大的的计算属性 A,它需要遍历个极大的数组和做大量的计 算,然后我们可能有其他的计算属性依赖于A,这时候我们就需要缓存,每 次确实需要重新加载,不需要缓存时用 methods