🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
标题：🕵️♀️
摘要：
本文将介绍Vue 3中watch侦听器的多种用法和案例，以及它在实际开发中的应用。
引言：
在Vue 3中，watch侦听器用于监听数据的变化，并在数据变化时执行相应的操作。了解watch侦听器的用法和案例对于Vue开发者来说具有重要意义。
正文：
1. watch的基本用法🔧
在 Vue 3 中，watch 函数是一个非常有用的工具，用于在数据变化时执行一些操作。以下是一些基本的用法：
- 创建一个
ref或reactive对象来存储需要监听的数据。
javascript
import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
const message = ref('Hello, Vue 3!');
// ...
}
};- 使用
watch函数来监听数据的变化。watch函数接收两个参数：一个是要监听的数据的引用，另一个是当数据发生变化时要调用的回调函数。
javascript
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。
javascript
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。
javascript
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侦听器监听数据变化，制作一个动态标题生成器
html
<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侦听器监听数据变化，实现一个动态背景颜色切换器
html
<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侦听器监听数据变化，实现一个动态加载图片的标题
html
<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>这些示例展示了如何使用 Vue 3 的 watch 侦听器监听数据变化，实现动态标题生成器、动态背景颜色切换器和动态加载图片的标题。通过这些示例，你可以更好地理解 watch 侦听器的用法。
总结：
Vue 3中的watch侦听器用于监听数据的变化，并在数据变化时执行相应的操作。了解watch侦听器的多种用法和案例对于Vue开发者来说具有重要意义。掌握watch侦听器的使用可以帮助我们更高效地处理数据变化。
参考资料：
- Vue 3官方文档：https://vuejs.org/
本文详细介绍了Vue 3中watch侦听器的多种用法和案例，以及它在实际开发中的应用。希望对您有所帮助。如有疑问或建议，请随时与我交流。📧🎉