Shulou(Shulou.com)06/03 Report--

This article is to share with you about how to use keepAlive in vue front-end development. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Preface

Keep-alive is a built-in component of Vue, and when it wraps dynamic components, it caches inactive component instances rather than destroying them.

Keep the state in memory during the component switching process, prevent repeated rendering of DOM, reduce loading time and performance consumption, and improve user experience. The mode of use is

The component here will be cached.

Keep-avlive hook function

Components created in keep-alive will have two more life cycle hooks: activated and deactivated. Activated: called when the keep-alive component is activated, keep-alive will keep the data in memory. If you want to get the latest data every time you enter the page, you need to obtain the data in the activated phase and undertake the task of obtaining the data in the original created hook function.

Deactivated: called when the keep-alive component is deactivated, the beforeDestory and destoryed hooks will not be called if keep-alive is used, because the component is not destroyed but cached, so the deactivated hook can be seen as an alternative to beforeDestory and destoryed, such as emptying localStorge data.

Which components are cached by keep-avlive

Which components of keep-avlive cache are cached in two ways, one is cached through the include and exclude attributes provided by the keep-avlive component, and the other is cached through the setting of the meta attribute in route.

Use the include and exclude properties to complete the cache component settings

/ * cache the name as a component of test * /

Using include is a component that sets the cache name to test.

With exclude, components whose name is test will not be cached.

Use the setting cache component of the meta property in route, such as

Export default new Router ({mode: 'history', routes: [{path:' /', name: 'home', component: Home, redirect:' goods', children: [{path: 'goods', name:' goods', component: Goods Meta: {keepAlive: false / / No cache}}, {path: 'ratings', name:' ratings', component: Ratings, meta: {keepAlive: true / / need cache}}]}]})

Caching is required for goods components and not for ratings. Use the following statement to dynamically complete the component cache settings in use, with the following code

Example

Set two components KeepCom1,KeepCom2,KeepCom1 sets the cache, KeepCom2 does not set the cache. Test the use of the two hook functions at the same time, here using the routing meta to set up the cache component.

The KeepCom1 code is as follows:

Add child elements export default {name: 'keepCom1', methods: {add () {let ul = document.getElementsByClassName (' content') [0] let li = document.createElement ('li') li [XSS _ clean] =' I am the added element 'ul.appendChild (li)}}, activated () {console.log (' cache activated execution')} Deactivated () {console.log ('cache deactivated execution')}}

The KeepCom2 code is as follows:

Add child elements export default {name: 'keepCom2', methods: {add () {let ul = document.getElementsByClassName (' content') [0] let li = document.createElement ('li') li [XSS _ clean] =' I am the added element 'ul.appendChild (li)}}, activated () {console.log (' cache activated execution')} Deactivated () {console.log ('cache deactivated execution')}}

The KeepCom1 and KeepCom2 codes are basically the same, that is, adding nodes to the page.

The keepAvliveTest code is as follows

Use caching without caching export default {name: 'keepAvliveTest'}

The switch between keepcom1 and keepcom2 components is completed, and the result is

Keepcom1 uses caching, and when you switch pages, the last three elements added are there, and the hook function is executed. Keepcom2 does not use caching, and when you switch pages, the last element you added no longer exists and returns to its original state. And the two hooks were not executed.

Thank you for reading! On "vue front-end development keepAlive how to use" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.