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