1. 理解Vue 3中Event Bus的概念和作用 Event Bus是一种集中式的事件管理机制,它允许不同的组件之间发送和接收事件。通过使用Event Bus,组件之间可以实现松耦合的通信,提高代码的可维护性和灵活性。 2. 创建一个新的Vue实例作为Event Bus 在Vue 3中,虽然不再直接使用Vue实例作为Event Bus,但我们可以通过创建一个...
在大型项目中,合理的组件通信非常重要。Provide/Inject及EventBus是Vue3中强大的组件通信工具,分别适用于不同的场景。合理使用它们能够提高应用的灵活性和可维护性,值得在实际项目中加以应用和实践。 通过本文的介绍,希望读者能够更好地理解Provide/Inject以及EventBus的使用方式,并在实际项目中灵活运用这些技术手段,提升...
import { createApp } from 'vue' import App from './App.vue' // ① 引入事件类 // 自己编写的或者mitt皆可 import EventBus from 'lib/bus.js' // 或者:import EventBus from 'mitt' const $bus = new EventBus() // ② 挂载 // 1.使用provide提供 app.provide('$bus', $bus) // 2.挂...
起因EventBus(中央事件总线) 在Vue2中可谓是最好用的非父子组件之间的通讯手段,但就在不久前,Vue3发布了,随之而来的有许多好用的新特性,但也有遗憾———Vue3宣布已不在内置 $on $emit API,对于EventBus的取消,官方推荐的做法是让用户自己寻找使用第三方库,对于用
本文主要记录了Vue3中eventBus – mitt的安装、封装、用法以及核心原理。 Vue3.x中移除了$on、$off等自带的自定义事件相关方法,因此在vue3中推荐我们使用mitt事件总线传递数据,其实mitt的使用方式和vue原本的自定义事件使用方式相同。 Mitt Mitt是一个体积极小的第三方消息发布/订阅式JavaScript库,React、Vue均可以...
vue官网 vue3.x版本中不能在使用eventBus了,不过官方有替代品mitt或tiny-emitter 本文介绍的是tiny-emitter 安装 npm install tiny-emitter --save 使用 varEmitter=require('tiny-emitter');varemitter=newEmitter();emitter.on('some-event',function(arg1,arg2,arg3){//});emitter.emit('some-event','arg...
本文介绍的是tiny-emitter
最近遇到了vue项目中的性能问题,整个项目不断的进行操作五分钟左右,页面已经很卡,查看页面占用了1.5G内存,经过排查一部分原因,是自己模块使用的eventBus在离开页面未进行off掉。我们进行下验证: 1、不随生命周期销毁 我们在home首页的代码是这样的: created () { ...
EventBus(中央事件总线) 在Vue2中可谓是最好用的非父子组件之间的通讯手段,但就在不久前,Vue3发布了,随之而来的有许多好用的新特性,但也有遗憾———Vue3宣布已不在内置 $on $emit API,对于EventBus的取消,官方推荐的做法是让用户自己寻找使用第三方库,对于用惯了EventBus的用户来说,属实有些小难受. 所以...
本文主要记录了Vue3中eventBus – mitt的安装、封装、用法以及核心原理。Vue3.x中移除了$on、$off等自带的自定义事件相关方法,因此在vue3中推荐我们使用mitt事件总线传递数据,其实mitt的使用方式和vue原本的自定义事件使用方式相同。MittMitt是一个体积极小的第三方消息发布/订阅式JavaScript库,React、Vue均可以使用...