当前位置：首页 > backend >正文

Vue.js Watch 侦听器：深入理解与应用

backend 2025/5/9 10:52:14

在 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>