使用 Vue 3 的 watchEffect 和 watch 进行响应式监视

Vue 3 的 Composition API 引入了 <script setup> 语法，这是一种更简洁、更直观的方式来编写组件逻辑。结合 watchEffect 和 watch，我们可以轻松地监视响应式数据的变化。本文将介绍如何使用 <script setup> 语法结合 watchEffect 和 watch，并通过一个示例展示它们的用法。

什么是 `<script setup>` 语法？

<script setup> 是 Vue 3 中的一种语法糖，它允许我们在单文件组件（SFC）中以更简洁的方式编写 Composition API 代码。使用 <script setup> 后，我们无需显式地使用 setup 函数，而是可以直接在 <script setup> 中编写逻辑。

什么是 `watchEffect`？

watchEffect 是 Vue 3 中的一个函数，用于自动跟踪响应式依赖，并在这些依赖发生变化时执行指定的副作用函数。与 watch 不同，watchEffect 不需要显式地指定要监视的依赖，它会自动收集在副作用函数中使用到的响应式数据。

什么是 `watch`？

watch 是 Vue 3 中的另一个函数，用于显式地监视指定的响应式数据，并在这些数据发生变化时执行回调函数。与 watchEffect 不同，watch 需要明确指定要监视的依赖。

示例代码

假设我们有一个组件，需要监视水温和水位的变化，并在水温达到 60 度或水位达到 80 时向服务器发送请求。我们可以使用 watchEffect 和 watch 来实现这一功能，并提供两个按钮来增加水温和水位。

以下是完整的代码示例：

<template><div><p>当前水温: {{ temp }}°C</p><p>当前水位: {{ height }}cm</p><button @click="increaseTemp">增加温度</button><button @click="increaseHeight">增加水位</button></div>
</template><script lang="ts" setup>
import { ref, watchEffect, watch } from 'vue';// 定义响应式数据
const temp = ref(50); // 初始水温为 50°C
const height = ref(70); // 初始水位为 70cm// 使用 watchEffect 监视数据变化
watchEffect(() => {if (temp.value >= 60 || height.value >= 80) {console.log('watchEffect: 条件满足，给服务器发请求');// 这里可以添加发送请求的逻辑}
});// 使用 watch 监视数据变化
watch([temp, height], ([newTemp, newHeight]) => {if (newTemp >= 60 || newHeight >= 80) {console.log('watch: 条件满足，给服务器发请求');// 这里可以添加发送请求的逻辑}
});// 增加温度的函数
const increaseTemp = () => {temp.value += 10;
};// 增加水位的函数
const increaseHeight = () => {height.value += 10;
};
</script>

代码解析

定义响应式数据：
- 使用 ref 函数定义了两个响应式数据 temp 和 height，分别表示水温和水位。
- 初始值设置为 temp = 50（水温）和 height = 70（水位）。
使用 watchEffect：
- watchEffect 自动跟踪 temp 和 height 的变化。
- 当 temp >= 60 或 height >= 80 时，触发副作用函数，打印日志并模拟发送请求。
使用 watch：
- watch 显式地监视 temp 和 height 的变化。
- 当 temp 或 height 发生变化时，触发回调函数，打印日志并模拟发送请求。
增加温度和水位的函数：
- increaseTemp：每次点击按钮，水温增加 10°C。
- increaseHeight：每次点击按钮，水位增加 10cm。

对比 `watchEffect` 和 `watch`

特性	`watchEffect`	`watch`
依赖收集	自动收集副作用函数中的响应式依赖	需要显式指定要监视的依赖
使用场景	适合不需要明确指定依赖的场景	适合需要明确指定依赖的场景
初始化执行	立即执行副作用函数	默认不会立即执行，除非设置 `{ immediate: true }`
性能	依赖自动收集，可能稍慢	依赖明确，性能稍高