前言

由于之前写了一个简单的订阅 -发布模式，如果有兴趣的话可以简单看下上次写的，点击右边的链接就可以了

计算属性与监听的区别

网上的答案如下：

首先上面给出的答案都是对的，但是呢，今天我在补充那么一丢丢

1. 计算属性是不支持异步的，但是我们可以通过插件acync-computed来进行一个异步的解决
2. 计算属性一般是不能和组件中data method中的变量名重复，否则会报错，原因是，计算属性是一个新值，她是要挂载在根组件实例上的，对象中不允许两个key重复。

基于事件总线中的监听？

监听在我们项目中有专有的api watch用来监听数据的变化，某一天面试中，面试官问如何监听组件中的函数

第一时间听到这句话直接给我搞懵逼了，监听函数的变化？怎样监听函数？

按理说，我不应该是监听组件中状态值的变化吗，怎么还来个含数监听的变化。我说watch不是可以用来监听吗，但是他告诉watch没法实现传参，我又懵逼了。他后来告诉我用事件总线，

啥，事件总线？

事件总线不是用来状态管理的吗， 我监听了this.$parent.xxx,不也可以实现函数的监听调用吗。到最后我都没想明白他到底要干啥

这样我们就简单回顾下事件总线

1. 首先事件总线是基于vue实例而创建的

2. 其次，在事件总线当中组件之间的通信还是基于vue本身的$on与$emit实现的

3. 为了方便全局的通信，所创建的实例还是挂载在我们初始化的vue实例上的，也就是vue的根组件this.$root实例上。

创建一个单独的event-bus.js文件
//引入vue模块
import Vue from 'vue'
let EventBus = new Vue()
export default EventBus

在组件中基于事件中线发送事件

//a.js
<script>
  import EventBus from event-bus.js
//发送事件，第二个参数可选
  EventBus.$on("aMsg", (msg) => {
      // 发送来的消息
      this.msg = msg;
    });
}
</script>

在挂载根组件实例上进行调用

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import { bus } from "@/tool/bus";

new Vue({
  render: h => h(App),
  beforeCreate() {
    this.$bus =bus
  }
}).$mount('#app')

组件中使用

export default {
 name: 'App',
 mixins:[mixinA],
 created() {
   console.log(this.name)
 },
 methods:{
   ab(a,b){
     this.comp = b;
     this.msg= a;
     this.$bus.$emit('hanshuming','参数')
   },
 
 }
}