Keep – what is alive

Keep-alive is a built-in component of Vue. Dynamic components wrapped by Keep-Alive are cached in memory and perform the Deactivated hook function instead of being destroyed during switchover

Keep – the role of the alive

During dynamic component switching, the state of the component is saved to prevent multiple DOM rendering and reduce performance consumption. If dynamic components are not wrapped with keep-alive, the component will be destroyed and created (repeatedly destroyed to create DOM) each time they are switched. As a result, the data in the component cannot be saved

Take a chestnut

aaa.vue

<template>
  <div id="aaa">
    <p>Warmth aaa</p>
  </div>
</template>

<script>
export default {
  name: 'aaa'.activated() {
    console.log('come in');
  },
  deactivated() {
    console.log('leave'); }}</script>
Copy the code

bbb.vue

<template>
  <div>
    <p>Warmth BBB -<span>{{ msg }}</span></p>
    <input type="text" v-model="msg">
  </div>
</template>

<script>
export default {
  name: 'bbb'.data() {
      return {
          msg: ' '}},mounted() {
    console.log('Component BBB created');
  },
  destroyed() {
    console.log('Component BBB destroyed'); }}</script>
Copy the code

ccc.vue

<template>
  <div id="ccc">
      <p>Warmth CCC -<span>{{ msg }}</span></p>
      <input type="text" v-model="msg">
  </div>
</template>

<script>
export default {
    name: 'ccc'.data() {
        return {
            msg: ' '}},mounted() {
      console.log('Component CCC created');
    },
    destroyed() {
      console.log('Component CCC destroyed'); }}</script>
Copy the code

home.vue

<template>
  <div class="home">
    <button @click="show(index)" :class="{active:currentIndex == index}" v-for="(item, index) in arr" :key="item.btnName">{{ item.btnName }}</button>
    <keep-alive>
      <component :is="arr[currentIndex].componentName"></component>
    </keep-alive>
  </div>
</template>
Copy the code
<script>
import comA from '@/components/aaa.vue'
import comB from '@/components/bbb.vue'
import comC from '@/components/ccc.vue'

export default {
  name: 'Home'.components: {
    comA, comB, comC
  },
  data() {
    return {
      arr: [{btnName: 'button 1'.componentName: 'comA'},
        {btnName: 'button 2'.componentName: 'comB'},
        {btnName: 'button 3'.componentName: 'comC'},].currentIndex: 0}},methods: {
    show(index) {
      this.currentIndex = index;
    }
  }
}
</script>
Copy the code

After traversing components A, B and C, click dynamic switch components, then use keep-alive to wrap the dynamic components, and see the effect

In this case, keep-alive is used to wrap the component. Instead of destroying the component and creating the rendering component multiple times, the state of our component is saved. If keep-alive is commented out, what will be the effect?

Obviously, without the keep-alive package, component switches frequently destroy, create DOM, and do not save the status of the component

Kepp-alive life-cycle hook function

A keep-alive component has two unique lifecycle hook functions: Activated and deactivated activated: activated when entering a component. Deactiveted: Activated when leaving a component

aaa.vue

export default {
   activated() {
	  console.log('come in');
   },
   deactivated() {
	  console.log('leave'); }}Copy the code

Keep – props of the alive

  • Include: string or regular expression – Only components whose names match will be rendered
  • Exclude: Components that match a string or regular expression – name will not be rendered
  • Max: number – Sets the maximum number of component instances that can be cached. Once this number is reached, the cached component instances that have not been accessed for the longest time are destroyed before new instances are created
<! -- comma-separated string -->
<keep-alive include="a, b, c">
  <component :is="view"></component>
</keep-alive>

<! -- Regular expressions (using 'v-bind') -->
<keep-alive :include="/a|b|c/">
  <component :is="view"></component>
</keep-alive>

<! -- array (using 'v-bind') -->
<keep-alive :include="['a', 'b', 'c']">
  <component :is="view"></component>
</keep-alive>

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