1. watch

  • 第一次不执行,如果需要第一次就执行可设置 immediate:true
  • 需要指定要监控的属性或对象,也要指定回调函数
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)
  • 可以得到监听变化前后的值

注意:
1. 监视reactive定义的响应式数据时,oldValue无法正确获取,强制开启了深度监视(deep配置失效)
2. 监视reactive定义的响应式数据中某个属性时,deep配置有效。

2. watchEffect

  • 第一次立即执行
  • 不需要指定某个属性
  • 无法获取到原值,只能得到变化后的值
  • 不用指明监视哪个属性,监视的回调中用到哪个属性就监视哪个属性

3. computed

  • 和 vue2 用法相同
  • 需要有返回值
  • 只能进行同步运算

computed 和 watchEffect 区别

1. computed 必须有返回值,只能支持同步运算
2. watchEffect 没有返回值,支持异步操作

Logo

前往低代码交流专区

更多推荐