如何更好地理解 Vue 3 watch 侦听器的用法

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 摘要：
- 引言：
- 正文：
- - 1. watch的基本用法🔧
  - 2. watch的多种用法🌟
  - 3. watch的案例🌐
- 总结：
- 参考资料：

标题：🕵️‍♀️

摘要：

本文将介绍Vue 3中watch侦听器的多种用法和案例，以及它在实际开发中的应用。

引言：

在Vue 3中，watch侦听器用于监听数据的变化，并在数据变化时执行相应的操作。了解watch侦听器的用法和案例对于Vue开发者来说具有重要意义。

正文：

1. watch的基本用法🔧

在 Vue 3 中，watch 函数是一个非常有用的工具，用于在数据变化时执行一些操作。以下是一些基本的用法：

创建一个 ref 或 reactive 对象来存储需要监听的数据。

import { ref, watch } from 'vue';export default {setup() {const count = ref(0);const message = ref('Hello, Vue 3!');// ...}
};

使用 watch 函数来监听数据的变化。watch 函数接收两个参数：一个是要监听的数据的引用，另一个是当数据发生变化时要调用的回调函数。

import { ref, watch } from 'vue';export default {setup() {const count = ref(0);const message = ref('Hello, Vue 3!');watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);});watch(message, (newValue, oldValue) => {console.log(`Message changed from ${oldValue} to ${newValue}`);});// ...}
};

如果需要在数据变化时执行异步操作，可以将回调函数设置为 async。

import { ref, watch } from 'vue';export default {setup() {const count = ref(0);async function increment() {count.value++;await fetchData();}watch(count, async (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);});// ...}
};

如果需要在数据变化时执行一个函数，但不需要记录旧值和新值，可以将第二个参数设置为 true。

import { ref, watch } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}watch(count, increment, { deep: true });// ...}
};

这些示例展示了如何在 Vue 3 中使用 watch 函数来监听数据的变化。通过这些示例，你可以更好地理解 watch 函数的用法。

2. watch的多种用法🌟

watch侦听器具有多种用法，以下是一些常见的用法：

监听基本数据类型：用于监听基本数据类型的变化；
监听对象和数组：用于监听对象和数组的变化；
监听函数：用于监听函数的变化；
监听多个数据：用于同时监听多个数据的变化。

3. watch的案例🌐

在实际开发中，watch侦听器可以用于多种场景，以下是一些典型的案例：

使用 watch 侦听器监听数据变化，制作一个动态标题生成器

<template><div><input v-model="title" placeholder="输入标题" /><h1>{{ title }}</h1></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const title = ref('');watch(title, (newVal, oldVal) => {console.log(`标题从 "${oldVal}" 变为 "${newVal}"`);});return {title};}
};
</script>

使用 watch 侦听器监听数据变化，实现一个动态背景颜色切换器

<template><div :style="{ backgroundColor: bgColor }"><button @click="changeBgColor">切换背景颜色</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const bgColor = ref('');watch(bgColor, (newVal, oldVal) => {console.log(`背景颜色从 "${oldVal}" 变为 "${newVal}"`);});function changeBgColor() {bgColor.value = bgColor.value === 'red' ? 'blue' : 'red';}return {bgColor,changeBgColor};}
};
</script>

使用 watch 侦听器监听数据变化，实现一个动态加载图片的标题

<template><div><input v-model="imageUrl" placeholder="输入图片URL" /><img :src="imageUrl" alt="动态图片" /></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const imageUrl = ref('');watch(imageUrl, (newVal, oldVal) => {console.log(`图片URL从 "${oldVal}" 变为 "${newVal}"`);});return {imageUrl};}
};
</script>