Vue3 Composition API watch函数使用教程

Vue 3 的 Composition API 引入了 watch 函数，用于观察一个或多个响应式数据，并在数据发生变化时执行相应的回调函数。以下是一个 watch 的使用教程：

1. 导入必要的模块

首先，你需要从 'vue' 中导入 watch 和 reactive（如果你正在使用响应式对象）。

import { watch, reactive } from 'vue';

2. 创建响应式数据

使用 reactive 函数来创建一个响应式对象。

const data = reactive({
  count: 0,
  name: 'John'
});

3. 使用 watch

watch 函数接受两个参数：第一个参数是你要观察的响应式引用或返回响应式引用的函数，第二个参数是当观察的数据发生变化时要执行的回调函数。

观察单个数据

watch(data.count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

// 修改数据以触发 watch
data.count++; // 输出: "Count changed from 0 to 1"

观察多个数据

你可以使用数组来同时观察多个响应式引用。当数组中的任何一个引用发生变化时，回调函数都会被触发。

watch([data.count, data.name], (newValues, oldValues) => {
  console.log(`Count: ${newValues[0]}, Name: ${newValues[1]}`);
  console.log(`Old Count: ${oldValues[0]}, Old Name: ${oldValues[1]}`);
});

// 修改数据以触发 watch
data.count++; // 输出与上面类似的信息
data.name = 'Doe'; // 也会触发上述的回调函数

观察计算属性

你也可以观察一个返回响应式引用的函数（这通常用于计算属性）。

watch(() => data.count * 2, (newValue, oldValue) => {
  console.log(`Doubled count changed from ${oldValue} to ${newValue}`);
});

// 修改数据以触发 watch
data.count++; // 输出: "Doubled count changed from 0 to 2"

观察 props 属性

import { watch } from 'vue'
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

// 监听props中show属性变化
watch(
  () => props.show,
  newVal => {
    console.log('newVal', newVal)
  }
)

4. 停止监听

watch 函数返回一个 StopHandle，你可以调用这个 StopHandle 来停止监听。

const stopWatching = watch(data.count, (newValue, oldValue) => {
  // ...
});

// 停止监听
stopWatching();

5. 立即执行

默认情况下，watch 只在数据变化后执行。如果你想在初始时立即执行回调函数，可以传递一个选项对象作为 watch 的第三个参数，并设置其 immediate 属性为 true。但请注意，Vue 3 的 watch 已经移除了这个选项，如果你需要立即执行，可以考虑使用 watchEffect。

希望这个教程对你有所帮助！

本文地址：https://www.tides.cn/p_vue-vue3-watch