VUE3 watch 和 watchEffect 和 computed 的区别

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 没有返回值，支持异步操作