关于vue3:关于-vue3-中删除-ononceoff-API-后的替代方案

18次阅读

共计 942 个字符,预计需要花费 3 分钟才能阅读完成。

举荐一个仓库。地址:https://github.com/tangdaohai…

在 vue3 版本中删除了 $on/$once/$off API (see),不过不必放心,能够应用此仓库作为代替计划,持续应用 event bus 的形式来实现跨组件的通信性能,并且不必手动去 $off 事件回调。

vue-happy-bus是一款基于 vue3 实现的 订阅 / 公布 插件。

在 vue 中,咱们能够应用 event bus 来实现 跨组件间通信。但一个弊病就是,这种形式并不会主动销毁,所以为了防止回调函数反复执行,还要在 onUnmounted 中去移除回调函数。

这样带来的冗余代码就是:

  1. $on 的回调函数必须是具名函数。不能简略的 $on('event name', () => {}) 应用匿名函数作为回调,因为这样无奈销毁事件监听,所以个别采纳 具名函数 作为回调
  2. onUnmounted 生命周期中去销毁事件的监听。

我只是想在某个路由中监听下 header 中一个按钮的点击事件而已,居然要这么麻烦???

所以此轮子被造出来了。

它次要解决在 夸组件间通信时 ,防止反复绑定事件、无奈主动销毁的而导致 回调函数被执行屡次 的问题。

总得来说他是能让你 偷懒 少写代码的工具。

具体应用文档见此处),不过不必放心,能够应用此仓库作为代替计划,持续应用 event bus 的形式来实现跨组件的通信性能,并且不必手动去 $off 事件回调。

vue-happy-bus是一款基于 vue3 实现的 订阅 / 公布 插件。

在 vue 中,咱们能够应用 event bus 来实现 跨组件间通信。但一个弊病就是,这种形式并不会主动销毁,所以为了防止回调函数反复执行,还要在 onUnmounted 中去移除回调函数。

这样带来的冗余代码就是:

  1. $on 的回调函数必须是具名函数。不能简略的 $on('event name', () => {}) 应用匿名函数作为回调,因为这样无奈销毁事件监听,所以个别采纳 具名函数 作为回调
  2. onUnmounted 生命周期中去销毁事件的监听。

我只是想在某个路由中监听下 header 中一个按钮的点击事件而已,居然要这么麻烦???

所以此轮子被造出来了。

它次要解决在 夸组件间通信时 ,防止反复绑定事件、无奈主动销毁的而导致 回调函数被执行屡次 的问题。

总得来说他是能让你 偷懒 少写代码的工具。

具体应用文档见此处

正文完
 0