计算属性和watcher

76 阅读1分钟

计算属性和watcher

vue中的watcher有三类

  1. render watcher
  2. computed
  3. 自定义watcher

computed是一种特殊的watcher

watch 和 computed 都是以函数为基础的,它们都是通过监听自身依赖的数据在变化时触发相关的函数去实现自身数据的变动。

不同点

行时机不同

  1. computed 是在 HTML,DOM 加载后马上执行的,如赋值;(属性将被混入到Vue 实例)
  2. watch 它用于观察 Vue 实例上的数据变动,一般情况下是依赖项的值变化之后再执行,当然可以设置立刻执行

计算属性有缓存

Computed watch 区别就是 computed 的缓存功能,当无关数据数 据改变时,不会重新计算,直接使用缓存中的值。计算属性是用来声明 式的描述一个值依赖了其他的值,当所依赖的值后者变量发生变化时, 计算属性也跟着改变, Watch 监听的是在 data 中定义的变量,当该变量变化时,会触发 watch 中的方法

代码内容不同

watcher可以写任意的逻辑代码;而计算属性必须是同步的计算,并返回