Recently, since most lists are included in the project and the pull-down refresh and pull-up loading has been done, it has been used.keep-alive groupThe page data is cached, but when doing some operations on other pages, the list data is changed, and when it comes to the list, it needs to be refreshed every time. The experience is not good, so EventBus is used, and when it needs to be updated, it uses EventBus to refresh the list.
-alive component
keep-alive is an abstract component provided by Vue, which is used to cache components to save performance. Since it is an abstract component, it will not be rendered into a DOM element after the page is rendered. However, it is easier to use for display pages, and form-type pages will also save the filled data, which is very practical for scenarios where the filled data is not submitted and the filled data needs to be saved.
The page cached by keep-alive will only be executed once created and mounted, which will only be executed on the first entry. However, there will be two more life cycles, namely activated and deactivated. Activated is executed every time it enters execution and deactivated is executed before each departure. Of course, some pages do not need to be cached, so they need to be processed. I won’t talk about it more here, because everyone probably knows (I don’t know if Baidu goes to...).
(Event Bus)
EventBus is used to implement data communication between components, which is very simple to use. Just add the following code to it:
.$eventBus = new Vue();
The above code creates a global EventBus, which is actually a vue instance.
This way we can use it in each page.
Using the $emit method in the page can trigger events, and then using the $on method in the component can listen to corresponding events. This is the same as passing values between components. However, this can pass state in non-parent and child components, which is similar to vuex. Of course, this method can be used in simple applications, and complex applications should use vuex, which is convenient for management and maintenance.
this.$eventBus.$emit('msg',data);// Trigger eventthis.$eventBus.$on('msg',(data)=>{}) // Listen to events
3. Combination use
I feel that these two match well when we use themkeep-aliveWhen the page component is cached, we need to trigger the list refresh of page B or other methods on the A side, it is very convenient to use EventBus at this time, and other methods are also possible, such as using vuex, but at this time, we do not use EventBus directly to facilitate and fast. When we use it in the page this.$eventBus.$on Listen to an event. As long as the page is cached, you can listen to events triggered by other pages. In this way, we can reduce some unnecessary requests, and update them when they need to be updated, and do some other operations, which is simply pleasant.
Summarize
The above is the method of using EventBus in keep-alive of vue introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!