本系列中会用到的第三方库
一、起因
上一篇文章中说过,在Vue的新版本,Vue3中删除了$on
,$once
,$off
等方法,$emit
仍然是现有 API 的一部分,因为它用于触发由父组件以声明方式附加的事件处理程序。
但是既然是组件开发,那么组件与组件之间的通信,组件与父级之间的通信肯定是少不了的,$emit
方法虽然已经能满足半数以上的通信需求,但是剩下满足不了的部分,就是满足不了。所以就要用到市面上的第三方库来作为平替方案了。
Vue3迁移文档中提及:在 Vue 3 中,已经不可能使用这些 API 从组件内部监听组件自己发出的事件了,该用例暂没有迁移的方法。
。但是在使用第三方库之前,我还是挣扎了一下,用其他方式去完成预期的功能,但是最终结合性能、复杂度等方面来考虑,还是通过引入第三方库的方式来使用这几个方法。
不过值得一提的是,如果只考虑当前项目,可以使用Vuex来实现,但是一个组件库不好自带VueX到处跑,所以最终还是使用了
mitt
,这个库不依赖某个框架,其本身的实现也比较简单。但是不好对方法、事件进行溯源,所以各位在实际开发中,就需要根据具体情况进行选择了,仁者见仁。
作者还是以学习为主,虽然
$emit
等几个方法已经用了很多次了,但是自己按照别人的库手抄一遍并且去理解其核心原理还是首次。
下文就简单讲讲对其中几个方法实现的简单理解。
如果看不懂也没关系,我会尽量锻炼我的文笔,并且在后面的组件开发过程中去深入讲解,以及分享一些使用心得。
一库:mitt.js $on等方法的平替
别问我为什么用一库, 懂的都懂。
选择mitt.js
这个库原因有二,其一是我在学习组件开发的时候,抄的开源库relax-plus(gitee)中的mitt
库的写法,对比原仓库中的mitt开源代码进行了一些修改,所以在我在开发过程中也一直是在使用这个库。其二这也是Vue3在迁移文档中点名推荐的平替方案。
1、数据保存
将mitt方法要做的事做个比喻,该库的作用好比一辆公交车,上面的东西任意取用(
$on
),如果你有什么信息需要传达出去也可以将至放在($emit
)车上;如果不想公开了也可以把它撤下来($off
)。
当然,最终可实现的方法肯定不只这几个, 但是这差不多是最核心的一个作用了。其他的方法在需要的地方也会一一提到。
先来说说这辆“车”是如何保存货物的。
这里用到的是ES6
带来的新的数据结构Map
了,相比起传统的对象的键值对方式, Map
采用的“值-值”的方式存储数据,更加实用,也更加灵活。
而在mitt
库中,实用Map
数据结构来作为数据的存储方