Vue中用EventBus实现keep-alive的替代方案叫什么?
- 内容介绍
- 文章标签
- 相关推荐
本文共计906个文字,预计阅读时间需要4分钟。
最近项目中,为了实现列表的动态加载,采用了下拉刷新和上拉加载的功能。这通过使用`keep-alive`组件来缓存页面数据实现。然而,当在其他页面进行操作改变列表数据时,回到列表页面需要重新下拉刷新获取最新数据。
最近项目中由于列表居多且都做了下拉刷新上拉加载,所以就使用了keep-alive组件来缓存页面数据,但是当在其他页面做一些操作改变了列表数据,当来到列表的时候每次都要下拉刷新一下,体验不好,所以就使用到了EventBus,在需要更新的时候就用EventBus来刷新列表。
1.keep-alive组件
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。但是对于展示型页面比较好用,表单类页面也会将所填数据保存起来,对于那种表单没提交又需要保存所填数据的场景非常实用。
keep-alive所缓存的页面只会执行一次created和mounted,也就是在第一次进入才会执行。但是又会多两个生命周期,分别是activated、deactivated,activated在每次进入执行而deactivated在每次离开前执行。 当然有些页面不需要缓存,就要进行一些处理,这里就不多讲了,因为估计大家都知道(不知道百度去...)。
2.EventBus(事件总线)
EventBus用于实现组件之间的数据通讯,使用起来非常之简单。
本文共计906个文字,预计阅读时间需要4分钟。
最近项目中,为了实现列表的动态加载,采用了下拉刷新和上拉加载的功能。这通过使用`keep-alive`组件来缓存页面数据实现。然而,当在其他页面进行操作改变列表数据时,回到列表页面需要重新下拉刷新获取最新数据。
最近项目中由于列表居多且都做了下拉刷新上拉加载,所以就使用了keep-alive组件来缓存页面数据,但是当在其他页面做一些操作改变了列表数据,当来到列表的时候每次都要下拉刷新一下,体验不好,所以就使用到了EventBus,在需要更新的时候就用EventBus来刷新列表。
1.keep-alive组件
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。但是对于展示型页面比较好用,表单类页面也会将所填数据保存起来,对于那种表单没提交又需要保存所填数据的场景非常实用。
keep-alive所缓存的页面只会执行一次created和mounted,也就是在第一次进入才会执行。但是又会多两个生命周期,分别是activated、deactivated,activated在每次进入执行而deactivated在每次离开前执行。 当然有些页面不需要缓存,就要进行一些处理,这里就不多讲了,因为估计大家都知道(不知道百度去...)。
2.EventBus(事件总线)
EventBus用于实现组件之间的数据通讯,使用起来非常之简单。

