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

在 Vue 3 中，watch 是一个非常强大的工具，用于监视数据的变化并执行相应的逻辑。它可以帮助你在数据变化时触发特定的操作，比如发送请求、更新状态等。接下来，我们将详细学习如何在 Vue 3 中使用 watch，并理解其背后的原理。

一、watch 的基本概念

（一）监视数据的变化

watch 的主要作用是监视数据的变化，并在数据变化时执行指定的回调函数。这在 Vue 2 和 Vue 3 中的作用是一致的，但写法有所不同。

（二）监视的数据类型

根据 Vue 3 的官方文档，watch 可以监视以下四种数据：

1. ref 定义的数据

2. reactive 定义的数据

3. 函数返回的值

4. 上述内容组成的数组

二、watch 的基本使用

（一）监视 ref 定义的基本类型数据

我们先从最简单的场景开始：监视 ref 定义的基本类型数据。

（二）示例代码

HTML复制

<template>
  <div>
    <h1>情况一：监视 ref 定义的基本类型数据</h1>
    <p>当前求和：{{ sum }}</p>
    <button @click="changeSum">sum + 1</button>
  </div>
</template>

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

const sum = ref(0);

const changeSum = () => {
  sum.value += 1;
};

watch(sum, (newValue, oldValue) => {
  console.log(`sum 从 ${oldValue} 变为 ${newValue}`);
  if (newValue >= 10) {
    console.log('sum 大于等于 10，停止监视');
    stopWatch();
  }
});

const stopWatch = watch(sum, () => { /* 空回调 */ });
</script>

（三）解释

1. 定义响应式数据：使用 ref 定义 sum，初始值为 0。

2. 监视数据：使用 watch 监视 sum 的变化。

3. 回调函数：当 sum 的值变化时，执行回调函数，打印新值和旧值。

4. 停止监视：当 sum 的值大于等于 10 时，调用 stopWatch 函数停止监视。

（四）运行效果

• 点击按钮，sum 的值会增加。

• 每次 sum 的值变化时，控制台会打印新值和旧值。

• 当 sum 的值达到 10 时，停止监视。

三、watch 的特点

（一）回调函数的参数

watch 的回调函数会接收两个参数：

1. newValue：变化后的值。

2. oldValue：变化前的值。

（二）停止监视

watch 返回一个函数，调用这个函数可以停止监视。

（三）不写 .value

在监视 ref 定义的数据时，不需要写 .value。这是因为 watch 会自动处理 ref 的值。

四、总结

（一）watch 的作用

watch 用于监视数据的变化，并在数据变化时执行指定的逻辑。

（二）监视的数据类型

watch 可以监视以下四种数据：

1. ref 定义的数据

2. reactive 定义的数据

3. 函数返回的值

4. 上述内容组成的数组

（三）使用场景

• 数据变化触发逻辑：例如，当用户输入的内容达到某个条件时，执行特定操作。

• 停止监视：在某些条件下停止监视数据的变化。

（四）代码示例

HTML复制

<template>
  <div>
    <h1>情况一：监视 ref 定义的基本类型数据</h1>
    <p>当前求和：{{ sum }}</p>
    <button @click="changeSum">sum + 1</button>
  </div>
</template>

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

const sum = ref(0);

const changeSum = () => {
  sum.value += 1;
};

watch(sum, (newValue, oldValue) => {
  console.log(`sum 从 ${oldValue} 变为 ${newValue}`);
  if (newValue >= 10) {
    console.log('sum 大于等于 10，停止监视');
    stopWatch();
  }
});

const stopWatch = watch(sum, () => { /* 空回调 */ });
</script>

通过上述内容，你可以更好地理解和使用 Vue 3 中的 watch。在实际开发中，watch 是一个非常有用的工具，可以帮助你在数据变化时执行复杂的逻辑。