答应我不要把 mitt 挂载到 vue3 的 globalProperties 上好吗?

看到一篇文章说 vue3 组件通信然后提到跨组件事件使用 mitt 这个没有毛病,也可以使用 vueuse 提供的 useEventBus

但是我对文中把 mitt 挂载到 app.config.globalProperties 上的这一个操作不是很认同

ts 复制代码
import mitt from 'mitt'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$bus = mitt()

app.mount('#app')

防杠 (ts + vue3 setup 项目),如果各位大佬有不同意见也欢迎留言讨论

原因如下

globalProperties

官方文档已经提示谨慎使用 = 约等于不推荐

猛击直达 github

这句话我的理解是应用如果真的需要一个全局访问的属性或者函数应该使用 provide / inject

app.config.globalProperties 是没有办法的办法-但凡有其他办法都不会去用它

再来看一下 globalProperties ts 类型定义

ts 复制代码
interface AppConfig { globalProperties: Record<string, any> }

挂载到 globalProperties 数据类型是 any,也就失去了 ts 类型提示(这个我觉得还是蛮重要的)

当然官方也提供了扩展 globalProperties 类型的方法 猛击直达链接

一个库在 ts 项目中没有类型提示不是约等于残废吗?

getCurrentInstance

假如你把属性挂载到 globalProperties 上要怎么使用呢?通过 getCurrentInstance

ts 复制代码
<script setup>
import { getCurrentInstance, onMounted } from 'vue'

const { proxy } = getCurrentInstance()

onMounted(() => {
  proxy.$bus.on('myEvent', (message) => {
    console.log(message)
  })
})
</script>

可是 getCurrentInstance 这个 API 在 2021 年就从文档移除了!

下边是一些 github 相关问题的回答

猛击直达链接

猛击直达链接

github.com/vuejs/docs/...

github.com/vuejs/docs/...

github.com/vuejs/docs/...

到这里大概可以说把 mitt 挂载到 vue3 的 globalProperties 上不是一个很明智的选择(你非要这么做俺也没办法)

或者说使用 app.config.globalProperties getCurrentInstance API 的时候要三思而后行!

mitt 使用的正确姿势

github 的说明文件给出了示例 猛击直达 npm

新建一个 mittBus.ts 文件把 emitter 导出

ts 复制代码
import mitt from 'mitt'

type EventBus = {
  test: {
    text: string
    status: boolean
  }
  test1: {
    status: string
  }
}

export const Bus = mitt<EventBus>()

在需要使用的地方导入然后使用

ts 复制代码
import { emitter } from './components/mittBus.ts'

// 触发
emitter.emit('test', { text: 'test',status: true })

// 监听
emitter.on('test', (e) => {
  console.log(e)
})

emitter.emit('test1', { status: 'test1' })

emitter.on('test1', (e) => {
  console.log(e)
})

就这么简单,这样在使用的时候就会有 ts 类型提示

而且这个 mittBus.ts 文件不止可以创建一个,业务简单就创建一个全局唯一的一个所有事件都写在里边,如果业务复杂可以按照模块划分 aMiitt.tsbMitt.ts 然后在需要的地方引入使用

总结

把 mitt 挂载到 app.config.globalProperties 上使用 getCurrentInstance 不是一个推荐的做法, app.config.globalProperties 官方文档提示谨慎使用,getCurrentInstance 则是已经从文档中移除是 vue3 的内部 API 虽然仍可以导入使用但官方明确表示不希望用户在应用中使用

正确的做法是新建一个文件 mittBus.ts 然后把 emitter 导出这样可以获取良好的类型提示

更多也是让更多的人正确认识 app.config.globalPropertiesgetCurrentInstance API

这里还有一篇 深入解析 mitt 和 vueuse useEventBus 的实现 可以了解 mitt 是如何实现的!

相关推荐
翻滚吧键盘10 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹16 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军37 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试