Vue-你不知道的Bus中央数据总线学习

最近两天在面试中被提及到vue组件通信的几种方式，这些都是巴拉巴拉的一堆网上可以百度到的通信方式，比如父子组件间的props和$emit，以及$refs，$children,$parent, 依赖注入,vuex，以及bus事件总线机制，因为提到了这个bus，所以面试官就问你知道bus的实现原理吗？在我之前的想法中我认为就是通信方式除了vuex需要去掌握一下原理外，其他的都是知道怎么用就好了，但是当面试官突然这么一问之后，我也突然一蒙蔽了，毕竟自己确实不知道。

基于上述原因，我现在慢慢的觉得程序的东西不仅仅需要知道怎么用，当然第一步是需要知道怎么使用，接下来就是要知道如何去实现这个技术或者插件，之前挺喜欢一位老师说的名句就是“了解真相才能获得真正的自由”

正文开始：vueBus是中央数据总线，是为了解决非关系组件间的通信问题，主要是使用了vue中的$on和$emit方法，使用发布者订阅者模式，必须在相同的实例才可以进行数据响应，中央数据总线可以使用空的vue实例来实现，有一个cache对象，使用$on新增订阅方法，通过$off进行订阅方法的删除，通过$emit实现通知订阅信息的更新。

其实bus等同于以下写法：创建一个Bus函数，创建两个方法和一个存储对象，通过$on收集依赖,通过$emit触发依赖方法。

class Bus {constructor() {this.callbacks = {}}$on(name, fn) {this.callbacks[name] = this.callbacks[name] || []this.callbacks[name].push(fn)}$emit(name, args) {if (this.callbacks[name]) {this.callbacks[name].forEach(cb => cb(args))}}
}
// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handle)
// child2
this.$bus.$emit('foo')

vueBus注意事项：

$bus.on应该在created钩子内使用，如果在mounted使用，它可能接收不到其他组件来自created钩子内发出的事件，
使用了$bus.on在beforeDestory钩子里应该需要使用$bus.off解除

顺带记得关注公众号一波分享你需要的资源

Vue-你不知道的Bus中央数据总线学习相关推荐

关于vue中bus中央数据总线传值的坑
官网这个方法是非父子组件之间的传值,用了之后才发现父子组件其实也可以用this.bus.$emit('xxx',data) 和 this.bus.$on('xxx',(data)=>{}) .但 ...
Vue.js实战之系统学习第七节
想看上一节的请点击: Vue.js实战之系统学习第六节接下来我们要学习第七节了,时间过的好快. 组件详解组件是Vue.js的核心功能,也是整个框架设计最精彩的地方,当然也是最难掌握的.本章节将带你 ...
Vue 生命周期记录_学习笔记
官方给出的设计图入戏为了能更好的理解这个图呢,写了下面的demo <!DOCTYPE html> <html><head><meta charset=&qu ...
Vue中bus的使用
vue总线机制(bus) vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同. bus适合小项目.数据被更少组件使用的项目,对于中大型项目数据在很多组件之间使用的情况 ...
vue 双向数据绑定的实现学习（一）
前言:本系列学习笔记从以下几个点展开什么是双向数据绑定双向数据绑定的好处怎么实现双向数据绑定实现双向数据数据绑定需要哪些知识点数据劫持发布订阅模式先看看我们要实现的目标是什么,如下动图: ...
vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试) 打包手动配置文件打包压缩,大文件处理 gzip进一步压缩打包app 打包部署模式 vu ...
新手入门指导：Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
vue、bus 使用遇到的坑，组件之间无法传值；vue、bus 第一次获取不到值，后面再点击重复执行
vue.bus 使用遇到的坑,组件之间无法传值:vue.bus 第一次获取不到值,后面数据叠加问题定位: 出现无法传值的情况,检查传值过程中组件是否还没有渲染:可能出现的情况是:组件被if,在你使用 ...
Vue.js实战之系统学习第一节
为什么叫系统学习呢?因为我以前接触过Vue.js,但是没学过它的原理,只是简单的使用了,使用的时候就觉得很好用,没有其他的什么感觉,但当我进入职场后,学习了很多的前端技术后,才发现这个技术的友好,被它 ...

Vue-你不知道的Bus中央数据总线学习

Vue-你不知道的Bus中央数据总线学习相关推荐

最新文章

热门文章