vue实现监听
Vue 监听实现方法
使用 watch 选项
在 Vue 组件中可以通过 watch 选项监听数据变化。当被监听的数据发生变化时，指定的回调函数会被触发。
export default {
data() {
return {
message: 'Hello'
}
},
watch: {
message(newVal, oldVal) {
console.log(`消息从 ${oldVal} 变为 ${newVal}`)
}
}
}深度监听对象
对于对象或数组，需要设置 deep: true 才能监听嵌套属性的变化。
watch: {
user: {
handler(newVal, oldVal) {
console.log('用户信息变化')
},
deep: true
}
}立即触发监听
设置 immediate: true 可以让监听器在创建时立即执行一次回调。
watch: {
value: {
handler(newVal) {
console.log('初始值:', newVal)
},
immediate: true
}
}计算属性监听
计算属性 (computed) 可以自动追踪依赖并重新计算，适合派生数据的监听。
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}使用 $watch API
可以在组件实例上直接调用 $watch 方法动态添加监听器。
mounted() {
this.$watch(
'count',
(newVal, oldVal) => {
console.log(`计数从 ${oldVal} 变为 ${newVal}`)
}
)
}监听路由变化
在 Vue Router 中可以通过 watch 监听 $route 对象的变化。
watch: {
'$route'(to, from) {
console.log(`路由从 ${from.path} 变为 ${to.path}`)
}
}监听 Vuex 状态
使用 mapState 或 watch 可以监听 Vuex store 中状态的变化。
computed: {
...mapState(['user'])
},
watch: {
user(newVal) {
console.log('用户状态更新:', newVal)
}
}使用事件总线
对于跨组件监听，可以创建事件总线实现发布-订阅模式。
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 发送事件
EventBus.$emit('event-name', data)
// 监听事件
EventBus.$on('event-name', data => {
console.log('收到事件:', data)
})生命周期钩子监听
某些特定场景可以通过生命周期钩子实现监听效果。
updated() {
console.log('组件已更新')
},
beforeDestroy() {
console.log('组件即将销毁')
}
