This is the first day of my participation in the August Changwen Challenge. For more details, see “August Changwen Challenge” (already 1 day).

The opening scene

The technology stack is layui+ VUE + JQ, and VUE is introduced later. In order to achieve better componentization, the page is componentized and the code repetition is reduced. Because THE JQ page often needs to obtain DOM elements, the page is very redundant, and the COMPONentization of THE JQ page is not easy. The function of the page is removed from encapsulation, so I introduced VUE. Recently, I need to realize a requirement, that is, multi-page cache. Click the menu bar on the left and display the page on the right, but all the pages that have been clicked need to be cached, as shown in the figure below

So this is a simple example that I did

Render directly using V-for

At the beginning, my idea was to design an array. Every time I clicked, I would push the clicked components into an array, and then I would iterate through the customized components through V-for.

When you click, all the content will be added. At this time, you need an index to show the current highlight, and the need is to show only one page at a time, this time you need to hide other pages through the index.

There is a problem with v-for, when deleting it, it will be rerendered because of the array changes

Can see implements this function at this time, but every click on add many of the same element This time we can do to a heavy operation Through to simple implementation of the many functions of the page Because my function is to implement multiple page caching Is to get these pages are cached, so I use the keep alive – this component, But when the array changes, the page is rerendered

So when I do B and I close A and I delete it and then B is rerendered and I don’t get the cache that I want. So it’s not possible to render directly with v-for. I then thought of implementing a custom directive myself to decide whether to render again, but the custom directive doesn’t have this at all. If you can’t get the instance, you can’t get the VNode and you can’t implement caching yourself. Later, I wanted to write a component and render it using JSX syntax to determine whether to cache or recreate the instance, but I couldn’t render it. Then I came up with the keep-Alive component, which renders the currently highlighted page without looping

Render directly with custom components

It is very troublesome to implement a keep-alive. The built-in keep-Alive is still very easy to use. The cache is still very strong.

The problem with keep-Alve’s powerful cache

Later, I found a problem. When I closed the page and clicked on it again, there was still data on the page, which can only be said that the keep-alive cache was too strong. Then I wanted to clear the cache. Include is the name of the component that contains it, exclude is the opposite, exclude is the name of the component that contains it, but my page component is built earlier and is anonymous

I tried adding name and it didn’t work. I checked how to clear the cache on Baidu.

Refer to the articleBlog.csdn.net/z00001993/a…I thought I could erase the cache when I delete it and it took me a long time to find the cache

This is a simple example that I wrote in the$children[0].$options.parent.cacheIn my real project is in_vnode.chindren.componentInstanceIn the first element inside,

The key is that if you find this thing with keep-alive, you can find the cache. I tried to write JSX before, but I didn’t find the cache. It’s hard to implement a keep-alive by yourself. We can find the cache and see that the key name in it is related to the name of our component. We can use indexOf to match and delete the cache

You can see that the functionality has been implemented so that you can implement multiple page caching. I have to say that Vue is still very strong keep-alive is still very strong

Progress a little bit every day, encounter a problem to learn to solve the problem!!