vue3的监听器的用法

在Vue3中，监听器的用法发生了一些变化。Vue2中使用的`$watch`方法已经被废弃，取而代之的是`watch`函数。下面是监听器的基本用法：

import { watch } from 'vue';

const state = {
    count: 0,
};

watch(
    () => state.count, // 监听的数据
    (newValue, oldValue) => { // 数据改变时执行的回调函数
        console.log(`count 从 ${oldValue} 变成了 ${newValue}`);
    }
);

在上面的例子中，我们使用了`watch`函数来监听`state.count`变量的变化。当`count`发生变化时，我们会在控制台上输出变化前后的值。

我们还可以使用`immediate`选项来立即执行回调函数：

watch(
    () => state.count,
    (newValue, oldValue) => {
        console.log(`count 从 ${oldValue} 变成了 ${newValue}`);
    },
    { immediate: true }
);

`watch`函数的第三个参数可以是一个选项对象，用来设置监听器的一些选项。除了`immediate`之外，还有`deep`、`flush`等选项可供使用。

watch(
    () => state.obj,
    (newValue, oldValue) => {
        console.log('obj 变化了');
    },
    {
        deep: true, // 是否深度监听对象的变化
        flush: 'sync', // 在什么时候执行回调函数，可选值：'pre'、'post'、'sync'
    }
);

除了使用`watch`函数之外，我们还可以在模板中使用`watch`指令来监听数据的变化。

<template>
    <div>
        <p>{{ count }}</p>
        <button @click="increment">+</button>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const count = ref(0);

        function increment() {
            count.value++;
        }

        return {
            count,
            increment,
        };
    },

    watch: {
        count(newValue, oldValue) {
            console.log(`count 从 ${oldValue} 变成了 ${newValue}`);
        },
    },
};
</script>

在上面的例子中，我们在组件的`watch`选项中定义了一个监听器，用来监听`count`变量的变化。当`count`发生变化时，我们会在控制台上输出变化前后的值。