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

VUE3 监听器（watch）

news 2025/7/6 4:41:26

在 Vue 3 中，监听器（watch）是用来观察响应式数据的变化，并在数据发生变化时执行相应操作的机制。watch 主要用于响应式数据变化时的副作用处理，比如异步操作、数据更新等。

1. 基础使用

在 Vue 3 中，watch 是作为一个组合式 API 提供的，可以在 setup 函数中使用它来监听响应式变量的变化。

<template><div><p>Count: {{ count }}</p><button @click="incrementCount">Increase</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const count = ref(0);// 使用常规函数来监听 countwatch(count, function (newValue, oldValue) {console.log('Count changed from ' + oldValue + ' to ' + newValue);});function incrementCount() {count.value++;}return { count, incrementCount };}
}
</script>

在这个例子中，watch 用来监听 count 变量的变化，当 count 改变时，回调函数会被触发，打印出 count 的旧值和新值。

2. 监听多个变量

watch 也可以监听多个响应式变量，只需要将它们作为数组传递给 watch。

<template><div><p>Name: {{ name }}</p><p>Age: {{ age }}</p><button @click="changeName">Change Name</button><button @click="changeAge">Change Age</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const name = ref('Bob');const age = ref(25);// 监听多个变量并使用普通函数watch([name, age], function (newValues, oldValues) {console.log('Name changed from ' + oldValues[0] + ' to ' + newValues[0]);console.log('Age changed from ' + oldValues[1] + ' to ' + newValues[1]);});function changeName() {name.value = 'Alice';}function changeAge() {age.value = 30;}return { name, age, changeName, changeAge };}
}
</script>

这里，watch 监听了 name 和 age 两个变量，回调函数会在任意一个变量发生变化时触发。

3. 深度监听

有时我们需要监听一个对象或数组的内部变化，而不仅仅是它的引用变化，这时可以使用 deep 选项。

<template><div><p>{{ user }}</p><button @click="user.name = 'Charlie'">Change Name</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const user = ref({ name: 'Alice', age: 30 });// 使用普通函数进行深度监听watch(user, function (newValue, oldValue) {console.log('User changed:', newValue);}, { deep: true });return { user };}
}
</script>

在这个例子中，watch 会监听 user 对象的任何属性变化，甚至是 name 和 age 字段的内部变化。

4. 立即执行监听器

有时我们希望在组件初始化时就立即执行一次监听器，而不仅仅是在数据发生变化时。可以通过 immediate 选项来实现。

<template><div><p>Message: {{ message }}</p><button @click="message = 'Hello, Vue!'">Change Message</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const message = ref('Welcome');// 使用普通函数并立即执行监听器watch(message, function (newValue, oldValue) {console.log('Message changed from ' + oldValue + ' to ' + newValue);}, { immediate: true });return { message };}
}
</script>

在这个例子中，watch 在组件创建时立即执行一次，输出 message 的初始值。

5. 异步操作

watch 中的回调函数可以是异步的，可以用于异步操作，比如请求数据等。

<template><div><p>Query: {{ query }}</p><button @click="query = 'Vue 3'">Search for Vue 3</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const query = ref('');// 使用普通函数处理异步操作watch(query, function (newQuery) {if (newQuery) {fetch('https://api.example.com/search?q=' + newQuery).then(response => response.json()).then(data => {console.log(data);});}});return { query };}
}
</script>

在这个例子中，当 query 变化时，会发起一个异步请求并打印返回的数据。

6. 停止监听

如果需要停止监听，可以使用 watch 的返回值，它是一个函数，调用该函数可以停止监听。

<template><div><p>Count: {{ count }}</p><button @click="stopWatching">Stop Watching</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const count = ref(0);// 使用普通函数监听 countconst stop = watch(count, function (newValue, oldValue) {console.log('Count changed from ' + oldValue + ' to ' + newValue);});// 停止监听function stopWatching() {stop();  // 停止监听}return { count, stopWatching };}
}
</script>