欢迎大家订阅【Vue2+Vue3】入门到实践 专栏,开启你的 Vue 学习之旅!
前言
在 Vue 中,watch
侦听器是一个非常实用的工具,用于处理自定义数据的变化。本文详细讲解了 watch
侦听器的基本用法、深度侦听和常见应用场景。
一、基本用法
①定义
watch
侦听器用于观察 Vue 实例上的数据变更。当被观察的数据属性发生变化时,相应的回调函数会被触发,从而执行相应的业务逻辑。
②应用场景
- 异步请求:当数据变化时,可发起新的 API 请求。
- 表单处理:及时响应用户输入变化,进行表单验证或自动保存。
- 复杂数据结构处理:监控嵌套对象或数组的变化,执行相应的逻辑。
③基本语法
写法一:监测简单数据属性
watch:{
数据属性名(newValue,oldValue){
一些业务逻辑/异步操作
}
}
【详解】
newValue
:变化后的值。当被观察的数据属性名
数据发生变化时,新的值会传递给这个newValue
参数。oldValue
:变化前的值。当数据属性名
的值改变时,可用这个参数来获取到变化之前的值。- 回调函数体:在
{}
内部的内容是要执行的业务逻辑或异步操作。当数据属性名
的值发生变化时,将会执行这个回调函数。
【示例】
watch:{
count(newValue,oldValue){
一些业务逻辑/异步操作
}
}
写法二:监测对象属性
watch:{
'对象.属性名'(newValue,oldValue){
一些业务逻辑/异步操作
}
}
【示例】
watch:{
'user.name'(newValue,oldValue){
一些业务逻辑/异步操作
}
}
【示例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>watch侦听器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>总数: {{ count }}</p>
<button @click="increment">加1</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
count: 0 // 初始化 count
};
},
methods: {
increment() {
this.count += 1; // 增加 count 值
}
},
watch: {
count(newValue, oldValue) {
console.log(`Count changed from ${oldValue} to ${newValue}`);
}
}
});
</script>
</body>
</html>
运行结果:
点击“加1”按钮后,控制台输出“Count changed from 0 to 1”
二、深度侦听
如果需要监听一个对象或数组的内部变化,可以使用深度侦听。
基本语法:
watch:{
数据属性名:{
deep:true, //深度监视(针对复杂类型)
immediate:true, //是否立刻执行一次handler
handler(newValue){
console.log(newValue)
}
}
}
deep
:一个布尔值参数,如果设置为true
,表示要对复杂类型(如对象或数组)进行深度监视,监视不仅限于对象或数组的引用变化,还监视其内部属性的变化。immediate
:一个布尔值参数,如果设置为true
,则在组件创建时立即执行一次回调函数(handler),可在数据初始化时就获取到当前的值,而不是等待数据改变时再执行。handler(newValue)
:监视器的回调函数,当被监视的变量发生变化时,执行此方法
【示例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>watch侦听器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>User Information:</h2>
<p>姓名: {{ user.name }}</p>
<p>年龄: {{ user.age }}</p>
<button @click="updateUser">更新用户</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
user: {
name: 'Alice',
age: 25
}
};
},
methods: {
updateUser() {
this.user.name = 'Bob'; // 更新用户名称
this.user.age += 1; // 增加用户年龄
}
},
watch: {
user: {
deep: true, // 深度监视
handler(newValue) {
console.log('User data changed:', newValue);
}
}
}
});
</script>
</body>
</html>
运行结果:
点击“更新用户”后: