当前位置：首页 > article >正文

Vue 3 中的 watch：监视数据的变化

article 2025/1/30 17:35:06

在 Vue 3 中，watch 是一个强大的工具，用于监视响应式数据的变化并执行相应的操作。与 Vue 2 中的 watch 类似，Vue 3 的 watch 功能更加灵活和强大。本文将详细介绍 Vue 3 中 watch 的使用方法，并通过代码示例演示如何监视不同类型的数据。

1. `watch` 的基本概念

watch 用于监视响应式数据的变化，并在数据变化时执行回调函数。Vue 3 中的 watch 可以监视以下四种数据：

ref 定义的数据。
reactive 定义的数据。
函数返回一个值（getter 函数）。
一个包含上述内容的数组。

2. `watch` 的使用方法

2.1 监视 `ref` 定义的数据

ref 是 Vue 3 中用于定义基本类型数据的响应式 API。我们可以使用 watch 来监视 ref 定义的数据。

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});

count.value = 5; // 输出：count 从 0 变为 5

2.2 监视 `reactive` 定义的数据

reactive 是 Vue 3 中用于定义对象类型数据的响应式 API。我们可以使用 watch 来监视 reactive 定义的对象。

import { reactive, watch } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 20
});

watch(
  () => state.age,
  (newValue, oldValue) => {
    console.log(`age 从 ${oldValue} 变为 ${newValue}`);
  }
);

state.age = 21; // 输出：age 从 20 变为 21

2.3 监视 getter 函数

我们可以通过 getter 函数来监视某个特定的值，而不是整个对象。

import { reactive, watch } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 20
});

watch(
  () => state.age > 18, // getter 函数
  (newValue, oldValue) => {
    console.log(`是否成年：${newValue}`);
  }
);

state.age = 17; // 输出：是否成年：false
state.age = 19; // 输出：是否成年：true

2.4 监视数组

我们可以通过数组来同时监视多个数据源。

import { ref, watch } from 'vue';

const count = ref(0);
const name = ref('Alice');

watch(
  [count, name],
  ([newCount, newName], [oldCount, oldName]) => {
    console.log(`count 从 ${oldCount} 变为 ${newCount}`);
    console.log(`name 从 ${oldName} 变为 ${newName}`);
  }
);

count.value = 5; // 输出：count 从 0 变为 5
name.value = 'Bob'; // 输出：name 从 Alice 变为 Bob

3. `watch` 的高级用法

3.1 深度监视

默认情况下，watch 是浅层监视的，即它只监视对象的第一层属性。如果需要监视对象的嵌套属性，可以使用 deep 选项。

import { reactive, watch } from 'vue';

const state = reactive({
  user: {
    name: 'Alice',
    age: 20
  }
});

watch(
  () => state.user,
  (newValue, oldValue) => {
    console.log('user 对象发生变化');
  },
  { deep: true } // 深度监视
);

state.user.age = 21; // 输出：user 对象发生变化

3.2 立即执行

默认情况下，watch 只有在监视的数据发生变化时才会执行回调函数。如果需要在初始化时立即执行回调函数，可以使用 immediate 选项。

import { ref, watch } from 'vue';

const count = ref(0);

watch(
  count,
  (newValue, oldValue) => {
    console.log(`count 从 ${oldValue} 变为 ${newValue}`);
  },
  { immediate: true } // 立即执行
);

// 输出：count 从 undefined 变为 0

4. 案例：监视老师信息的变化

假设我们有一个老师的信息对象，包含姓名、年龄和教授的课程。我们可以使用 watch 来监视这些信息的变化。

4.1 代码示例

<template>
  <div>
    <h2>老师信息</h2>
    <p>姓名: {{ teacher.name }}</p>
    <p>年龄: {{ teacher.age }}</p>
    <p>课程: {{ teacher.course }}</p>
    <button @click="updateTeacher">修改老师信息</button>
  </div>
</template>

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

// 定义老师信息的响应式对象
const teacher = reactive({
  name: '张老师',
  age: 40,
  course: '数学'
});

// 监视 teacher 对象的变化
watch(
  () => teacher,
  (newValue, oldValue) => {
    console.log('老师信息发生变化', newValue);
  },
  { deep: true } // 深度监视
);

// 修改老师信息的函数
const updateTeacher = () => {
  teacher.name = '李老师';
  teacher.age = 45;
  teacher.course = '物理';
};
</script>