在 Vue.js 开发中，watch 侦听器是一个强大的工具，它允许我们监听数据的变化，并在数据变化时执行特定的操作。本文将详细介绍 Vue.js 的 watch 侦听器，包括基本用法、深度监听、即时触发等，并提供可运行的代码示例。
一、语法格式
1.选项式 API（Options API）
在选项式 API 中，watch 作为一个选项存在于组件选项对象里。以下是它的基本语法：
export default {
data() {
return {
// 定义需要监听的数据
myData: '初始值'
};
},
watch: {
// 监听 myData 的变化
myData(newValue, oldValue) {
// 当 myData 变化时执行的逻辑
console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
}
}
};在上述代码中，myData 是要监听的数据属性，当它的值发生改变时，对应的回调函数就会被调用，并且新值和旧值会作为参数传递给回调函数。
如果要监听嵌套对象的属性，需要使用字符串路径：
export default {
data() {
return {
user: {
name: '张三'
}
};
},
watch: {
'user.name'(newValue, oldValue) {
console.log(`新名字: ${newValue}, 旧名字: ${oldValue}`);
}
}
};2.组合式 API（Composition API）
在组合式 API 里，要使用 watch 函数来创建侦听器。以下是基本语法：
import { ref, watch } from 'vue';
export default {
setup() {
// 定义响应式数据
const myData = ref('初始值');
// 创建侦听器
watch(myData, (newValue, oldValue) => {
console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
});
return {
myData
};
}
};在这个例子中，watch 函数接收两个参数，第一个是要监听的响应式数据，第二个是回调函数，当数据发生变化时回调函数就会被调用。
如果要监听多个数据源，可以传入一个数组：
import { ref, watch } from 'vue';
export default {
setup() {
const data1 = ref('值1');
const data2 = ref('值2');
watch([data1, data2], ([newData1, newData2], [oldData1, oldData2]) => {
console.log(`data1 新值: ${newData1}, 旧值: ${oldData1}`);
console.log(`data2 新值: ${newData2}, 旧值: ${oldData2}`);
});
return {
data1,
data2
};
}
};上述代码展示了在组合式 API 中监听多个数据源的方法，当 data1 或 data2 发生变化时，回调函数都会被调用。
二、基本用法
watch 侦听器最基本的用法是监听一个数据属性的变化。当这个属性的值发生改变时，watch 会自动执行相应的回调函数。
下面是一个简单的示例，我们监听 message 属性的变化，并在其变化时打印一条消息：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Watch Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="输入一些内容">
<p>你输入的内容是：{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '你好，世界'
},
watch: {
message(newValue, oldValue) {
console.log(`消息已从 "${oldValue}" 变为 "${newValue}"`);
}
}
});
</script>
</body>
</html>运行结果：
在 Vue.js 的 watch 选项里，你可以对一个数据属性进行监听。当这个数据属性的值发生改变时，与之对应的函数就会被调用，这个函数就是回调函数。在当前示例中，watch 选项监听的是 message 数据属性，而 message(newValue, oldValue) 就是在 message 数据属性值改变时被调用的回调函数。
在上述代码中，我们创建了一个简单的 Vue 实例，包含一个 message 数据属性和一个输入框，通过 v-model 指令将输入框与 message 绑定。在 watch 选项中，我们定义了一个 message 侦听器，它接收两个参数：newValue 和 oldValue，分别表示新值和旧值。当 message 的值发生变化时，会在控制台打印一条消息。
三、深度监听
默认情况下，
watch只能监听数据属性引用的变化。对于对象或数组而言，若只是改变其内部的某个属性，而对象或数组的引用并未改变，默认的watch不会触发回调函数。深度监听通过设置deep: true，可以递归地监听对象或数组的所有嵌套属性，只要其中任何一个属性的值发生变化，都会触发回调函数。
如果需要监听一个对象或数组的变化，我们可以使用深度监听。深度监听会递归地监听对象或数组的所有属性。
下面是一个深度监听的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Deep Watch Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="updateNestedData">更新嵌套数据</button>
<p>嵌套数据：{{ nestedData }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
nestedData: {
name: 'John',
age: 30
}
},
watch: {
nestedData: {
handler(newValue, oldValue) {
console.log('嵌套数据已更新');
},
deep: true
}
},
methods: {
updateNestedData() {
this.nestedData.age++;
}
}
});
</script>
</body>
</html>
四、即时触发
有时候，我们希望在组件初始化时就立即执行一次 watch 侦听器的回调函数。可以通过设置 immediate: true 来实现。
以下是一个即时触发的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Immediate Watch Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>计数器：{{ counter }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
},
watch: {
counter: {
handler(newValue, oldValue) {
console.log(`计数器已从 ${oldValue} 变为 ${newValue}`);
},
immediate: true
}
}
});
</script>
</body>
</html>
在这个示例中，我们设置了 immediate: true，因此在组件初始化时，watch 侦听器的回调函数会立即执行一次，打印出计数器的初始值。
总结
Vue.js 的 watch 侦听器是一个非常实用的工具，它可以帮助我们在数据变化时执行特定的操作。通过基本用法、深度监听和即时触发，我们可以灵活地应对各种数据变化的场景。希望本文能帮助你更好地理解和使用 Vue.js 的 watch 侦听器。
你可以将上述代码复制到一个 HTML 文件中，然后在浏览器中打开，即可看到运行效果。通过修改代码中的数据和操作，你可以进一步探索 watch 侦听器的更多用法。