vue-learning: 34 - component - built-in module - caching component keep-alive

vue built-in cache component keep-alive

<keep-alive>Cached component instance within a component package label switching, rather than destroying them. Avoid multiple load corresponding components, reducing performance overhead. And when the assembly <keep-alive>is within the handover, it activatedand deactivatedthese two will be a function of the life cycle of the corresponding hook executed.

• include string or a regular expression. Only the component name matches will be cached.
• exculde string or a regular expression. Any component matching names will not be cached.

================

• When activated cache component activation trigger
• When the trigger assembly cache deactivated deactivated

<keep-alive>Wrapping the inner assembly requires that only one component is rendered

Basic use

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>`过渡动画 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

Conditions Cacheinclude / exclude

• First check the matching component itself name option, if the name option is not available, matching its locally registered name (parent component key components option). Anonymous component can not be matched.
• include and exclude attributes allow conditional assembly buffers. Both strings are separated by commas, or a regular expression to represent the array:

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

<!-- 结合vuex动态修改cacheComponents数组变量实现动态判断 -->
<keep-alive :include="cacheComponents">
  <router-view></router-view>
</keep-alive>

<!-- 结合this.$route.meta条件判断 -->
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

keep-alive lifecycle hook function: activated, deactivated

Included in the <keep-alive>assembly created, it will be more than two hooks life cycle: activatedwith deactivated.
Only after assembly is wrapped when keep-alive, the life cycle of these two will be called, if used as a normal component, it is not being called, and after the 2.1.0 version, exclude the use of exclusion, even if wrapped in keep- alive, the two hooks still will not be called! Also in the server-side rendering this hook will not be called.

When acquiring data
use Data will be retained, if you want to get the latest data on each entry to a page, you need to get data in memory in the activated phase, the original assume the task of acquiring data created hooks.
When introduced keep-alive, the page is first entered, the order is triggered hook created-> mounted-> activated, deactivated triggered when exiting. When re-enter (forward or backward), only trigger activated.

We know that after the keep-alive after the first initialization page template parsing HTML fragments become, re-enter the re-analysis but not in reading the data in memory, that is, only when the data changes, using only diff VirtualDOM be updated. So pages into the data acquisition should be activated also put a copy. Data downloaded manually manipulate the DOM part should also be performed to take effect in the activated.

So, should remain activated in a data acquisition code, or not created in part, directly to transfer the code created in the activated.

Practice

https://www.cnblogs.com/wangmaoling/p/9803960.html
https://www.cnblogs.com/wangmaoling/p/9826063.html