10、Vue 3 （2024 版）基础笔记 - 侦听器

Vue3 中的侦听器（Watcher）是用于监听特定数据源（如响应式数据、计算属性、getter 函数等）变化的工具，当这些数据发生变化时，侦听器会自动触发预设的回调函数。

Vue3 提供了两种主要的侦听器 API：watch() 和 watchEffect()。

准备工作

1、创建组件

src/components/WatchDemo.vue

<template></template>

<script setup lang="ts"></script>

2、引入组件

src/App.vue

<template>
    <WatchDemo/>
</template>

<script setup lang="ts">
    import WatchDemo from "@/components/WatchDemo.vue";
</script>

watch

src/components/WatchDemo.vue

<template>
    <button @click="clickHandler">换一个名称</button>
    <p>{{ message }}</p>
</template>

<script setup lang="ts">
    import {ref, watch} from 'vue'

    const message = ref('王美丽')
    const clickHandler = () => {
        message.value = '王丽丽'
    }

    /**
     * message 必须与监听数据的 message 名保持一致
     * newValue 新值
     * oldValue 旧值
     */
    watch(message, (newValue, oldValue) => {
        console.log(newValue, oldValue)
    })
</script>

watch() 函数用于精确监听一个或多个指定的数据源，并在这些数据源的值发生变更时执行回调函数。它接受两个主要参数：

• source：要监听的数据源。可以是以下几种形式：
  • 单个响应式对象的属性引用（如 ref、reactive 对象的属性）。
  • 计算属性（一个返回值的函数）。
  • 一个返回值的 getter 函数。
  • 一个包含多个数据源的数组，用于同时监听多个数据源。
• callback：当监听的数据源发生变化时执行的回调函数。回调接收两个参数：
  • newValue：新值。
  • oldValue：旧值。

watchEffect

src/components/WatchDemo.vue

<template>
    <div class="counter">
        <h2>计数器</h2>
        <p>当前计数：{{ count }}</p>
        <p>描述：{{ descriptiveMessage }}</p>
        <button @click="increment">增加计数</button>
    </div>
</template>

<script setup lang="ts">
import { ref, watchEffect, computed } from 'vue';

// 响应式状态：计数器值
const count = ref(0);

// 根据计数值计算描述性消息
const descriptiveMessage = computed( () => {
    if (count.value === 0) {
        return '计数尚未开始';
    } else if (count.value === 1) {
        return '已经计数一次';
    } else {
        return `已经计数 ${count.value} 次`;
    }
})


// 使用 watchEffect 监听 count 变化并更新描述性消息
watchEffect(() => {
    // 当内部访问到的响应式状态（如 count）发生变化时，此回调函数会自动重新执行
    const message = count.value
    console.log(message)
});

const increment = () => {
    count.value++;
}
</script>

watchEffect 一进来就会执行，这个打开 F12 就可以发现。