Vue3 watch揭秘：基本用法与原理深度解析

Vue3中的watch函数用于监听数据的变化，当数据发生变化时，可以执行一些操作。watch函数的基本用法如下：

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, oldValue) => {
      console.log(`count 的新值为：${newValue}，旧值为：${oldValue}`);
    });
    return {
      count
    };
  }
}

在上面的例子中，我们创建了一个响应式数字变量count，并使用watch函数监听它的变化。当count的值发生变化时，会自动执行传入的回调函数，并打印出新的值和旧的值。

原理介绍：

Vue3中的watch函数是基于Proxy实现的。当我们在组件中使用watch函数时，Vue会为每个被监听的数据创建一个Proxy对象。这个Proxy对象会在数据发生变化时自动触发相应的回调函数。具体来说，Watcher对象会观察Proxy对象的变化，并在变化发生时调用相关的回调函数。Watcher对象是异步的，这意味着它可以在回调函数执行期间继续观察Proxy对象的变化。如果回调函数返回一个值，那么Watcher对象会立即停止观察Proxy对象的变化。