vue 通过监听实现
监听实现方式
在Vue中，可以通过多种方式实现监听功能，包括watch选项、$watch方法以及计算属性（computed）。以下是具体实现方法：
使用 watch 选项
watch 是Vue实例的一个选项，用于监听数据变化并执行回调函数。
export default {
data() {
return {
message: 'Hello',
count: 0
};
},
watch: {
message(newVal, oldVal) {
console.log(`消息从 ${oldVal} 变为 ${newVal}`);
},
count: {
handler(newVal, oldVal) {
console.log(`计数从 ${oldVal} 变为 ${newVal}`);
},
immediate: true // 立即触发一次
}
}
};- 特点：适合监听单个数据的变化，支持深度监听（
deep: true）和立即触发（immediate: true）。
使用 $watch 方法
通过this.$watch动态创建监听器，适合在组件生命周期中灵活控制。
export default {
data() {
return {
temperature: 25
};
},
created() {
this.$watch(
'temperature',
(newVal, oldVal) => {
console.log(`温度从 ${oldVal} 变为 ${newVal}`);
},
{ deep: true }
);
}
};- 特点：可动态取消监听（通过返回的
unwatch函数），适合条件监听。
使用计算属性（computed）
计算属性基于响应式依赖缓存结果，适合派生状态的监听。
export default {
data() {
return {
firstName: '张',
lastName: '三'
};
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
},
watch: {
fullName(newVal) {
console.log(`全名变为: ${newVal}`);
}
}
};- 特点：自动追踪依赖，高效处理复杂逻辑。
监听对象或数组的深层变化
通过deep: true监听对象或数组内部变化。
watch: {
user: {
handler(newVal) {
console.log('用户信息变化:', newVal);
},
deep: true
}
}监听路由变化
使用watch监听$route对象，响应路由参数变化。
watch: {
'$route'(to, from) {
console.log(`从 ${from.path} 跳转到 ${to.path}`);
}
}注意事项
- 性能优化：避免过度使用
deep，尤其是大型对象。 - 清理监听器：动态
$watch需在组件销毁前调用unwatch()。 - 异步操作：在监听回调中处理异步时，注意竞态条件。
通过以上方法，可以灵活实现Vue中的数据监听需求。
