Vue 中 this.$emit(‘mount‘) 的妙用

在 Vue 开发中，$emit 常用于父子组件通信，但你是否见过组件内自己触发并监听事件的写法？例如在一个组件的 created 钩子中调用 this.$emit('mount')，然后在 mounted 中通过 this.$on('mount', ...) 监听该事件。这种模式看似奇怪，实则隐藏了异步逻辑的协调智慧。本文将深入剖析这种设计的使用场景、潜在问题与优化方案。

一、代码
以下是一个典型的案例（来自真实代码）：

// 1. 在 created 钩子中，异步获取数据后触发 mount 事件
created() {Promise.all([...]).then(res => {this.date = res[0].minDate;this.$emit('mount'); // 数据就绪后触发事件})
}// 2. 在 mounted 钩子中监听 mount 事件
mounted() {this.$on('mount', async () => {// 设置表单默认值、加载列表this.getList();});
}

二、这种模式的核心作用
1. 解决异步依赖问题
在 created 钩子中，组件通过 Promise.all 异步加载数据（如部门列表、部署时间等）。
在 mounted 钩子中，组件的 DOM 已挂载，但需要依赖异步加载的数据来初始化表单或加载表格。
通过 $emit('mount')，确保数据就绪后才执行后续逻辑，避免因数据未加载导致的空值错误。
2. 替代复杂的侦听器（Watch）
如果直接使用 watch 监听多个数据的变化，代码会变得复杂：
JavaScript
 watch: {
 // ... 多个字段需要监听
 }
而通过一个 mount 事件，可以将所有依赖异步数据的初始化逻辑集中处理。