Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use keepAlive in the Vue project", so the editor summarizes the following, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use keepAlive in the Vue project" article.

The use of keepAlive

In the process of development, you need to use keepAlive if you often browse pages that need to be cached, and the pages are long and need to record the location of scrolls.

There are three steps.

1. First record the keepAlive in the mate attribute in the route, and set it to true if caching is needed.

Path:'/index',name:''index',component: () = > import ('.. /.. / index/index'), meta: {keepAlive:true}

2. Add the scrollBehavior method when creating the router instance (keepAlive will take effect).

Let router=new Router ({mode: "hash", / / 1, hash hash: has # 2. History history: there is no # base:process.env.BASE_URL, / / automatically get the root directory path scrollBehavior: (to,from,position) = > {if (position) {return position} else {return {XRO _ 0cr _ yscrollBehavior}

3. Keep-alive on the router-view package that needs to be cached (there must be two router-view, one is displayed when cached, the other is displayed when not cached, and sometimes there is no need for caching).

Be careful

Components in keep-alive have two lifecycle hook functions, activated and deactivated, where activated is called when the component is rendered for the first time, and then each time the cache component is activated. Therefore, when you use it, you need to have the same code as the created function.

Description of considerations and issues for keepAlive

Today, a bug was mentioned in the test. When the same build is repeated, the methods in mounted and created are not triggered, resulting in a different display of the page.

Reason

When you wrap a dynamic component, inactive component instances are cached rather than destroyed. Similarly, it is an abstract component: it does not render an DOM element by itself, nor does it appear in the parent component chain. (so mounted and created event hooks are not triggered)

When a component is switched internally, its two lifecycle hook functions, activated (active) and deactivated (inactive), will be executed accordingly.

Include and exclude

The include (cached files) and exclude (do not swap files) properties allow components to cache conditionally.

Max

The maximum number of component instances that can be cached.

The above is about the content of this article on "how to use keepAlive in the Vue project". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.