watch API 完全等效于 2.x this.$watch (以及 watch 中相应的选项)。watch 需要侦听特定的数据源,并在回调函数中执行副作用。默认情况是懒执行的,也就是说仅在侦听的源变更时才执行回调。
- 对比 watchEffect,watch 允许我们:懒执行副作用;更明确哪些状态的改变会触发侦听器重新运行副作用;访问侦听状态变化前后的值。
监听 reactive 对象
vue3.0 beta
{{ state.count }}
add
当你点击 按钮进行++操作的时候,你可以看到控制台会输出类似这样的(1、0)(2、1)(3、2)这就是 count 的改变之后的值和改变之前的值。
监听 ref 对象
setup() { const state = ref(0); watch(state, (count, prevCount) => { console.log(count, prevCount); }); const add = () => { state.value++; }; // 暴露给模板 return { state, add }; }
可以看到以上代码的功能和监听 reactive 对象是一样的。
监听 多个ref 对象
setup() { const count = ref(10); const state = ref(0); watch([count, state], ([newCount, newState], [oldCount, oldState]) => { console.log("count新值" + newCount, "count旧值" + oldCount); console.log("state新值" + newState, "state旧值" + oldState); }); const add = () => { state.value++; }; // 暴露给模板 return { state, add }; }
可以看到上面是代码是同时两个 ref 对象,必须以数组的形式进行监听,返回值也是以数组的形式进行返回的,返回的第一个数组的新的值,第二个数组的旧的值。
监听普通对象
watch(state.value, (count, prevCount) => { console.log(count, prevCount); });
可以看到控制台会有类似如下错误输出。
A watch source can only be a getter/effect function,a ref ,a reactive object, or an array of these types.
大概意思是:
被观察的数据只能是 getter/effect 函数、ref、reactive对象或者这些类型是数组。