watch监听vue3

在Vue3中，我们可以使用`watch`函数来监听响应式对象的变化。`watch`函数接受两个参数：要监听的目标和回调函数。当目标发生变化时，回调函数将被触发。

例如，我们可以这样使用`watch`函数来监听一个响应式对象的属性值：

import { watch, reactive } from 'vue';

const obj = reactive({ count: 0 });

watch(() => obj.count, (count) => {
  console.log(`count is: ${count}`);
});

在上面的例子中，我们使用`watch`函数来监听`obj.count`属性的变化。当`obj.count`发生变化时，回调函数将被调用，并打印出新的属性值。

此外，如果我们想要在侦听器回调中能够访问Vue更新之后的DOM，我们可以使用`flush: 'post'`选项。例如：

import { watchEffect } from 'vue';

watchEffect(() => {
  // 在这里可以访问Vue更新之后的DOM
}, { flush: 'post' });

在上面的例子中，我们使用`watchEffect`函数来创建一个侦听器，并指定`flush: 'post'`选项。这样，在每次Vue更新之后，侦听器的回调函数将被调用，这样我们就能够访问到更新后的DOM。

需要注意的是，如果我们想手动结束一个监听，我们可以通过调用`watch`或`watchEffect`函数返回的函数来实现。例如：

import { watch, watchEffect } from 'vue';

const unwatch = watch(() => {/* 监听的操作 */});
const unwatchEffect = watchEffect(() => {/* 侦听器的操作 */});

// 当监听不再需要时，调用返回的函数来手动结束监听
unwatch();
unwatchEffect();

在上面的例子中，我们创建了一个`watch`和一个`watchEffect`监听，然后通过调用返回的函数`unwatch`和`unwatchEffect`来手动结束这两个监听。

这样，我们就可以使用`watch`函数来监听Vue3中的响应式对象的变化，并且通过指定`flush: 'post'`选项来在侦听器回调中访问更新后的DOM。