Vue 如何在 keep-alive 中使用 EventBus

Vue 如何在 keep-alive 中使用 EventBus

最近项目中由于列表居多且都做了下拉刷新上拉加载,所以就使用了 `keep-alive` 组件来缓存页面数据,但是当在其他页面做一些操作改变了列表数据,当来到列表的时候每次都要下拉刷新一下,体验不好,所以就使用到了 `EventBus`,在需要更新的时候就用 `EventBus` 来刷新列表。

## 1.keep-alive 组件

`keep-alive` 是 Vue 提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个 DOM 元素。但是对于展示型页面比较好用,表单类页面也会将所填数据保存起来,对于那种表单没提交又需要保存所填数据的场景非常实用。

`keep-alive` 所缓存的页面只会执行一次 `created` 和 `mounted`,也就是在第一次进入才会执行。但是又会多两个生命周期,分别是 `activated`、`deactivated`,`activated` 在每次进入执行而 `deactivated` 在每次离开前执行。
当然有些页面不需要缓存,就要进行一些处理,这里就不多讲了,因为估计大家都知道 (不知道百度去...)。

## 2.EventBus(事件总线)

`EventBus` 用于实现组件之间的数据通讯,使用起来非常之简单。只需要在 `main.js` 中加入以下代码:

```
Vue.prototype.$eventBus = new Vue();
```

复制代码上面代码就创建了一个全局 `EventBus`,其实就是一个 Vue 实例。

这样我们就可以在各个页面中使用了。

在页面中使用 `$emit` 方法就可以触发事件, 然后组件中使用 `$on` 方法就可以监听对应事件, 这个和组件之间传值是一样的。不过这个可以在非父子组件中传递状态, 和 `vuex` 差不多。当然这种方法在简单应用中可以使用,复杂的应用应该使用 `vuex`,这样方便管理和维护。

```
this.$eventBus.$emit('msg',data);// 触发事件
this.$eventBus.$on('msg',(data)=>{}) // 监听事件
```

## 3. 组合使用

这两个我感觉很配,当我们使用 `keep-alive` 缓存了页面组件,我们需要在 A 面来触发 B 页面的列表刷新或其他方法时,这时候使用 `EventBus` 就非常方便,其他方法也可以,比如说使用 `vuex`,但是此时就没有直接使用 `EventBus` 方便快捷了。
当我们在页面中使用了 `this.$eventBus.$on` 去监听一个事件,只要页面被缓存,就可以监听到其他页面触发的事件。这样我们就可以减少一些不必要的请求,而且在需要更新的时候去更新,也可以做一些其他的操作,简直美滋滋。

第一次发布文章,只是想和大家做一个交流,不足的地方还请大神多多指点。

作者:_余昊_
链接:https://juejin.im/post/5cbc5d9c5188257aaa66f65a
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文由 开发指南 作者:开发指南 发表,其版权均为 开发指南 所有,文章内容系作者个人观点,不代表 开发指南 对观点赞同或支持。如需转载,请注明文章来源。
4

发表评论