Vue3 监听属性知识点汇总
编程小白也能看懂的监听属性完全指南
📝 什么是监听属性？
监听属性是Vue中用来观察数据变化并执行相应操作的功能。想象一下，当你家中的温度计检测到温度变化时，空调会自动调整工作状态 – 监听属性在Vue中扮演的就是这个温度计的角色。
为什么需要监听属性？
- 当数据变化时执行特定操作（如API请求）
- 在数据改变时进行复杂的逻辑处理
- 监听多个数据源的变化并做出响应
- 代替复杂的计算属性使用场景
🔍 watch 的基本使用
watch 是Vue中最基础的监听方式，它允许你监听特定的数据源并在数据变化时执行回调函数。
// 监听单个数据源
watch(被监听的属性, (新值, 旧值) => {
// 当数据变化时执行的代码
});
// 示例：
watch(count, (newVal, oldVal) => {
console.log(`计数从${oldVal}变为${newVal}`);
});
特点：
- 需要明确指定要监听的数据源
- 可以获取变化前的旧值
- 默认不会立即执行（除非设置
immediate: true） - 支持深度监听对象/数组
⚡ watchEffect 的妙用
watchEffect 会自动追踪其回调函数内部使用的响应式数据，并在这些数据变化时自动重新执行。
watchEffect(() => {
// 自动追踪函数内部使用的所有响应式数据
console.log(`计数: ${count.value}, 用户名: ${user.name}`);
});
与watch的主要区别：
- 自动收集依赖，无需指定监听对象
- 无法获取变化前的旧值
- 立即执行一次（类似设置了
immediate: true） - 更适合监听多个数据源的情况
记忆口诀：
watch – 明确知道要监听什么
watchEffect – 不知道具体依赖谁，但知道要做什么
watch – 明确知道要监听什么
watchEffect – 不知道具体依赖谁，但知道要做什么
🧠 深度监听（deep）
默认情况下，watch只监听对象本身的变化（如整个对象被替换），不会监听对象内部属性的变化。使用deep: true可以深度监听对象内部的每个属性。
// 深度监听对象
watch(user, (newVal) => {
console.log(‘用户信息变化’, newVal);
}, {
deep: true
});
// 深度监听特定嵌套属性
watch(() => user.address.city, (newVal) => {
console.log(‘城市变化:’, newVal);
});
何时使用深度监听？
- 监听复杂对象（嵌套层次深）
- 监听数组内部元素的变化
- 当不知道具体哪个属性会变化时
⏱️ 立即执行（immediate）
默认情况下，watch只在监听的数据源变化时执行回调函数。设置immediate: true可以让回调函数在监听开始时立即执行一次。
watch(searchQuery, (newVal) => {
// 在组件创建时立即执行一次，后续变化也会执行
fetchResults(newVal);
}, { immediate: true });
常见使用场景：
- 组件初始化时加载数据
- 需要立即根据初始值执行操作的场景
- 替代created生命周期中的初始化逻辑
🛑 停止监听
在组件卸载时，Vue会自动停止所有监听器。但有时我们可能需要手动停止监听（比如在特定条件下不再需要监听）。
// watch 返回停止函数
const stopWatch = watch(data, callback);
// watchEffect 返回停止函数
const stopEffect = watchEffect(callback);
// 需要停止监听时调用
stopWatch();
stopEffect();
何时需要手动停止？
- 监听器在条件满足后不再需要
- 在异步操作中设置的监听器
- 在setup函数外部创建的监听器
🎮 监听属性示例演示
watch 示例
计数变化日志: {{ countLog }}
用户名变化日志: {{ nameLog }}
watchEffect 示例
全名变化日志: {{ fullNameLog }}
当前全名: {{ fullName }}
💡 最佳实践与注意事项
- 优先使用计算属性而不是监听器来处理派生数据
- 避免在监听器中修改正在监听的数据，这可能导致无限循环
- 对于复杂对象，优先监听特定属性而不是整个对象（性能更好）
- 在组合式API中，watch/watchEffect应在setup()中调用
- 异步操作中注意正确处理监听器的清理工作