Learn Chapter 20 of vue3 (keep alive cache component)

Built in components keep-alive

Sometimes we don't want components to be re rendered to affect the user experience ; Or in terms of performance , Avoid repeated rendering to reduce performance . I want the components to be cached , Maintain the current state . And that's where it comes in keep-alive Components .

Turn on keep-alive Life cycle change

• When I first entered ： onMounted> onActivated
• Trigger after exit deactivated
• Once again into the ：
• It will only trigger onActivated
• How to mount the event, etc , The one-time execution is placed in onMounted in ; Every time a component goes in, its execution method is placed in onActivated in

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

<!--  Sub components of multiple conditional judgments  -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!--  and  `<transition>`  Use it together  -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

 include  and  exclude

 <keep-alive :include="" :exclude="" :max=""></keep-alive>

include and exclude prop Allow components to conditionally cache . Both can be comma separated strings 、 Regular expressions or an array to represent ：

max

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>