watch深度监听数组_vue3.0项目开发（七）新特性之响应式系统watch函数

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对象或者这些类型是数组。