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 } |
性能 | 依赖自动收集,可能稍慢 | 依赖明确,性能稍高 |
总结
通过 <script setup>
语法,我们可以更简洁地编写 Vue 组件的逻辑。watchEffect
和 watch
是 Vue 3 中用于监视响应式数据变化的强大工具:
watchEffect
适合自动跟踪依赖的场景。watch
适合需要显式控制依赖的场景。
在实际开发中,可以根据具体需求选择合适的工具。希望本文能帮助你更好地理解和使用 watchEffect
和 watch
。如果你有任何问题或建议,欢迎在评论区留言讨论!