vue订阅者实现
Vue 订阅者模式实现
在 Vue 中实现订阅者模式通常通过自定义事件或 Vuex 状态管理完成。以下是几种常见方法：
自定义事件（Event Bus）
创建一个全局事件总线作为中介：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()组件订阅事件：
import { EventBus } from './eventBus'
EventBus.$on('event-name', (payload) => {
console.log('Received:', payload)
})发布事件：
EventBus.$emit('event-name', { data: 'example' })Vuex 状态管理
通过 Vuex 的 store 实现状态订阅：
// store.js
export default new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state, payload) {
state.count += payload
}
}
})组件订阅状态变化：
this.$store.subscribe((mutation, state) => {
if (mutation.type === 'increment') {
console.log('Count changed:', state.count)
}
})watch 监听器
直接监听响应式数据变化：
export default {
data() {
return { message: 'Hello' }
},
watch: {
message(newVal, oldVal) {
console.log('Message changed:', newVal)
}
}
}第三方库（如 mitt）
使用轻量级事件库：
import mitt from 'mitt'
const emitter = mitt()
// 订阅
emitter.on('event', (data) => console.log(data))
// 发布
emitter.emit('event', { key: 'value' })注意事项
- 事件总线需在组件销毁时移除监听器避免内存泄漏：
EventBus.$off('event-name') - Vuex 更适合大型应用的状态管理，小型项目可使用事件总线
- 深层对象监听需要指定
deep: true参数
选择方法时应根据项目规模和复杂度决定，简单组件通信可用自定义事件，跨组件状态管理推荐 Vuex。
