When a dynamic component is wrapped with keep-alive, inactive component instances are cached rather than destroyed

Scene: Button control component is displayed, showing the internal components of the style change (e.g., click the button to change the color), when the component is displayed, button control to change color after the parent component control child components display hide, switch each child components (destroy, create) style could not be saved, and keep alive – after a component style change, The style remains after switching to show and hide

<! -- Parent component --><template>
  <div id="example">
    <! -- <BB v-if="showBB"></BB> -->
    <keep-alive><BB v-if="showBB"></BB></keep-alive>
  </div>
</template>
<script>
import BB from "./bb";
export default {
  data() { return {  showBB: true}; },methods: {
    change2() {this.showBB = !this.showBB; }},components: { BB,},
};
</script><! -- Subcomponent --><template>
  <div>
    <div ref="aaa">Color change</div>
    <button @click="aa">To change the color</button>
  </div>
</template>
<script>
export default {
  methods: {
    aa() {this.$refs.aaa.style.color = "blue"; ,}}};</script>
Copy the code
Keep-alive life cycle

After keep-alive, the component will not be destroyed. Therefore, created will be initialized only once and will not be executed again even after switching, corresponding to two cycles of its own

  • Activated activated
  • Deactivated fails
<script>
export default {
  activated() {
    // Each call is executed
    console.log("B component Render Activated");
  },
  deactivated() {
    // Each call is executed
    console.log("Component B deactivated");
  },
  created() {
    // It will only be executed once
    console.log("B component render create"); }}; </script>Copy the code
Keep-alive sets the components that need to be cached, those that do not need to be cached, and the maximum number of components that can be cached. This applies to the Name scenario: Multiple components And some components in keep-alive need to be cached and some do not need to be cached
  • Include The component that needs to be cached
  • Exclude Specifies a component that does not need to be cached
  • Max Indicates the upper limit of the cache component
  • Syntax: include a string = “a, b” regular: include = “/ a | b/” array: include =” [‘ a ‘, ‘b’]”

If the preceding method is not used, all items are cached by default. If include is used, all items that are not included are not cached. Otherwise, exclude is the same

Example:

<template>
  <div>
    <button @click="change">According to include1</button>
    <button @click="change2">Display include2</button>
    <keep-alive exclude="include1" max="2">
      <component :is="currentView"></component
    ></keep-alive>
  </div>
</template>
<script>
import In1 from "./include1";
import In2 from "./include2";
export default {
  name: "include".data() {return { currentView: In1 }},
  methods: {
  change() {this.currentView = In1},
  change2() {this.currentView = In2}
  },
  components: { In1, In2 },
};
</script><! -- include1 --><template>
  <div><div ref="aaa">include1</div><button @click="aa">include1</button></div>
</template>
<script>
export default {
  name: "include1".methods: {aa() {this.$refs.aaa.style.color = "blue"}}};</script><! -- include2 --><template>
  <div><div ref="aaa">include2</div><button @click="aa">include2</button></div>
</template>
<script>
export default {
  name: "include2".methods: {aa() {this.$refs.aaa.style.color = "red"}}};</script>

Copy the code