background

Keep-alive is one of the few components that we can manually optimize the performance of the framework. Can we wrap all the components with keep-alive to achieve higher performance? This paper mainly explains the use of keep-alive through the source code;

feature

Keep-alive mainly realizes two functions: 1. Update component cache through LRU algorithm (mainly to make more effective use of memory and avoid memory overflow); 2. 2 Cache component; The LRU algorithm part is no longer redundant, we mainly look at how to implement the cache component, first look at the source code about this part of the code:

render () { const slot = this.$slots.default const vnode: VNode = getFirstComponentChild(slot) const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions if (componentOptions) { // check pattern const name: ?string = getComponentName(componentOptions) const { include, exclude } = this if ( // not included (include && (! name || ! matches(include, name))) || // excluded (exclude && name && matches(exclude, name)) ) { return vnode } const { cache, keys } = this const key: ? string = vnode.key == null // same constructor may get registered as different local components // so cid alone is not enough (#3269) ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') : vnode.key if (cache[key]) { vnode.componentInstance = cache[key].componentInstance // make current key freshest remove(keys, key) keys.push(key) } else { // delay setting the cache until update this.vnodeToCache = vnode this.keyToCache = key } vnode.data.keepAlive = true } return vnode || (slot && slot[0]) }Copy the code

Keep-alive means that the template is not written and the render result is processed by the render function. 1. When rendering a keep-alive component, check whether there is a cache. If the parent component is uninstalled, the cache will be invalid. If the parent component is uninstalled, the cache will be invalid. Based on these features, we can see in which scenarios we should use keep-alive;

Usage scenarios

1 vue-router, because the parent element of the router is not unloaded, we can cache different page components when switching between different routers; 2 Dynamic component, LLDB.

<keep-alive>
  <component :is="view"></component>
</keep-alive>
Copy the code

Since keep-alive is officially recommended for dynamic components, I mainly want to use keep-alive in the context of dynamic components, so I will say more here. I originally intended to use keep-alive in the same way as the demo above, but it didn’t work for two reasons: 1) The parent component does not update the dynamic component; If the parent component is uninstalled, the cache of the dynamic component is also gone. So when exactly can keep-alive be used in dynamic components? e.g.

<keep-alive>
  <component :is="view1" v-if="show === 'view1'"></component>
  <component :is="view2" v-if="show === 'view2'"></component>
</keep-alive>
Copy the code

This can be used when we use v-if in the parent component to determine what to display (similar to vue-router). Keep-alive is not necessary, however, and you can also consider using v-show to keep other modules rendered.

conclusion

In fact, this time to understand keep-alive, except to learn how to use it. In fact, a large part of the optimization of React is to deal with the child component rerender caused by the parent component rerender. However, the update granularity of vue is at the component level. The update of the parent component does not lead to the update of the child component, so the optimization method is also different.