vue2 watch 和computed 的区别

59 阅读1分钟

有关watch

  • 组件的可见性对watch的执行没有直接影响
    • 无论组件是否可见,watch监听的数据只要发生变化就会执行
  • watcher 之间没有顺序,如果有顺序依赖
    • 重新设计,改为computed 或者mounted
    • 使用vuex等本地数据
  • 没有设置immediate,不会在组件初始化时立即执行。而是观察的数据变化的时候执行
    • 设置了:会立即执行一次

有关computed

  • 依赖的数据发生变化,计算属性会重新计算,并缓存结果
  • 在模板表达式中:mounted 阶段之后执行
  • 组件渲染过程计算,并根据响应数据自动更新

默认情况下,computed先于watch执行,watch可能会间接导致computed重新计算

区别computedwatch
定义声明性的描述一些数据依赖关系用于观察和响应vue实例上数据的变化
调用时机依赖数据发生变化,计算属性会重新计算当被侦听的数据发生变化,执行对应的对调函数
缓存机制(性能)有缓存无缓存
异步支持不支持异步,所以不要ajax请求支持异步
数据关系适合一个数据被多个数据影响一个数据影响多个数据
执行时机默认会立即执行默认不会立即执行配置 immediate = true 可立即执行
使用场景适合执行较为复杂的计算逻辑,并且这些计算逻辑依赖于其他响应式数据适合在数据变化时执行复杂的逻辑或异步操作