以下是以资深软件开发工程师的视角，对“Vue3 监听属性”的专业回答。我将详细讲解 Vue3 中如何使用 watch 监听属性（即响应式数据的变化），包括其用法、场景和示例，结合 HTML5，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 17 日的最新信息，以 Vue 3.4.x（最新稳定版）为基准。
Vue3 监听属性
目录
1. 引言
在 Vue3 中，监听属性（watch）是一种强大的机制，用于响应数据的变化并执行副作用逻辑，例如发起 API 请求或更新 UI。本教程将全面介绍 Vue3 中 watch 的使用方法，帮助您掌握其在选项式 API 和组合式 API 中的应用。
2. 什么是 Vue3 监听属性？
- 定义：
watch是 Vue 提供的一种工具，用于监听响应式数据的变化，并在数据变更时执行指定的回调函数。 - 特点：
- 响应式：仅对响应式数据（如
ref、reactive）有效。 - 灵活性：支持监听单个属性、对象或计算属性。
- 用途：处理数据变化的副作用，如异步操作、状态同步等。
3. 监听属性的两种方式
3.1 选项式 API 中的 watch
- 定义：在组件的
watch选项中声明。 - 语法：
watch: {
属性名(newValue, oldValue) {
// 监听逻辑
}
}
- 示例：
<template>
<input v-model="count" type="number">
<p>计数: {{ count }}</p>
</template>
<script>
export default {
data() {
return { count: 0 };
},
watch: {
count(newValue, oldValue) {
console.log(`count 从 ${oldValue} 变为 ${newValue}`);
}
}
};
</script>
3.2 组合式 API 中的 watch
- 定义：通过
watch函数在setup()或<script setup>中使用。 - 语法：
import { watch } from 'vue';
watch(监听源, (newValue, oldValue) => {}, [options]);
- 监听源：
ref对象：直接传入。reactive对象属性：使用 getter 函数。- 数组：监听多个源。
- 示例：
<template>
<input v-model="inputValue" placeholder="输入">
<p>值: {{ inputValue }}</p>
</template>
<script setup>
import { ref, watch } from 'vue';
const inputValue = ref('');
watch(inputValue, (newVal, oldVal) => {
console.log(`inputValue 从 ${oldVal} 变为 ${newVal}`);
});
</script>
4. watch 的配置选项
| 选项 | 描述 | 示例 |
|---|---|---|
immediate | 创建时立即执行一次 | watch(count, handler, { immediate: true }) |
deep | 深度监听对象内部变化 | watch(obj, handler, { deep: true }) |
flush | 控制回调的执行时机 | watch(count, handler, { flush: 'post' }) |
flush可选值：'pre'：DOM 更新前（默认）。'post'：DOM 更新后。'sync'：同步执行。- 示例（深度监听）：
<script setup>
import { reactive, watch } from 'vue';
const user = reactive({ name: 'Alice', info: { age: 25 } });
watch(user, (newVal) => {
console.log('user 变化:', newVal);
}, { deep: true });
</script>
5. 完整示例
以下是一个结合选项式和组合式 API 的监听示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 监听属性</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>监听示例</h1>
<input v-model="searchQuery" placeholder="搜索">
<p>搜索词: {{ searchQuery }}</p>
<p>结果: {{ searchResult }}</p>
<child-component v-model="childValue" />
<p>子组件值: {{ childValue }}</p>
</div>
<script>
const ChildComponent = {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" placeholder="子组件输入">
`
};
const app = Vue.createApp({
data() {
return {
searchQuery: '',
searchResult: '',
childValue: ''
};
},
watch: {
searchQuery(newVal) {
this.fetchSearchResult(newVal);
},
childValue: {
handler(newVal) {
console.log('子组件值变化:', newVal);
},
immediate: true
}
},
methods: {
async fetchSearchResult(query) {
// 模拟异步搜索
await new Promise(resolve => setTimeout(resolve, 500));
this.searchResult = query ? `找到: ${query}` : '无结果';
}
},
components: { 'child-component': ChildComponent }
});
app.mount('#app');
</script>
</body>
</html>
- 运行方法：保存为
watch.html，在浏览器中打开（需联网加载 Vue）。 - 效果：
- 输入搜索词，500ms 后显示结果。
- 子组件输入值变化时立即打印到控制台。
6. 与 Vue2 的差异
| 方面 | Vue2 | Vue3 |
|---|---|---|
| API 支持 | 仅选项式 watch | 选项式 + 组合式 watch |
| 深度监听 | 默认需手动 deep: true | 同左，但更灵活 |
| 多源监听 | 不支持 | 支持数组监听多个源 |
| flush 选项 | 无此选项 | 新增，控制执行时机 |
- 关键变化：Vue3 的
watch在组合式 API 中更强大，支持多源监听和执行时机控制。
7. 最佳实践与注意事项
- 选择 API：小型项目用选项式
watch，大型项目用组合式watch。 - 深度监听：仅在必要时使用
deep，避免性能开销。 - 立即执行：使用
immediate初始化监听逻辑。 - 副作用：将复杂逻辑放入
watch，保持computed纯净。 - 调试：结合 Vue Devtools 检查监听触发。
8. 结论
Vue3 的 watch 提供了灵活的属性监听能力，适用于处理数据变化的副作用。本教程通过示例展示了其在选项式和组合式 API 中的用法。如需深入学习，可参考 Vue3 样式绑定 或官方文档（vuejs.org）。
回答特点
- 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
- 实用性：从基础到实践，覆盖监听属性全貌。
- 内部链接：通过
<a href="#ID">跳转，如 监听属性的两种方式。 - 出站链接：嵌入正文，指向权威资源。
发表回复