Vue's common built-in components, introduction and use of component and keep-alive

1、keep-alive

When the component is switched back and forth, in order to avoid the performance problem caused by the repeated rendering of the DOM node, the component is saved in the memory, and the component wrapped by the <keep-alive></keep-alive> tag, when the data in the wrapped component is not When it changes again, it will be cached.

important point:

• Wrapped components are cached instead of destroyed when the data does not change
• The keep-alive tag will not be rendered in the DOM tree, nor will it exist in the parent component chain, that is, it does not exist in this.$parents.
• The switched and wrapped components are required to have their own names, whether through the component's name option or local/global registration. When a component is matched, the name option of the component itself is checked first. If the name option is not available, its local registration name (the key value of the parent component components option) is matched. So anonymous components cannot be matched.
• Lifecycle hooks:

                For a cached component, entering the component again will not trigger beforeCreate, created, beforeMounted, mounted. If you want to execute a certain logic every time you enter the component, you can put it in the hook of the activated access cache component. In the same way: when leaving the cache component, beforeDestroy and destroyed will not be triggered, you can use the deactivated hook to leave the cache component instead

• Multiple conditional judgment sub-components require only one sub-element to be rendered, and cannot be used with v-for, as follows

  <keep-alive>
    <comp-a v-if="a > 1"></comp-a>
    <comp-b v-else></comp-b>
  </keep-alive>

Props：

include: string or regular expression. Only components with matching names will be cached. (Example: <keep-alive include='One'> Only components named One will be cached).

exclude: string or regular expression. All components with matching names will not be cached. (Example: <keep-alive exclude='Two'> A component named Two will not be cached).

max: Number, how many component instances can be cached at most. Once this number is reached, the oldest instance of the cached component that has not been accessed is destroyed before a new instance is created.

<!-- 逗号分隔字符串 -->
<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>

<!-- 最大缓存数 (使用 `v-bind`) -->
<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

2. component dynamic component

 Use vue's built-in tag <component> to switch between different components through the is tag attribute

Props：

is:String

Common occasions: switch between different components in a multi-tab interface (the position of the label needs to be rendered as that component)

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

It is often used in conjunction with keep-alive, and the specific use depends on the needs.

This article draws on the information found on the Internet and integrates it.