动态组件

1. 什么是动态组件

动态组件指的是根据条件动态切换显示与隐藏的组件。这种方式允许在同一个位置根据不同的条件渲染不同的组件。

2. 如何实现动态组件渲染

Vue 提供了一个内置的 <component> 组件，用来实现动态组件的渲染。通过设置 <component> 组件的 is 属性，可以指定需要渲染的组件。<component> 组件会根据 is 属性的变化来动态切换不同的组件。

示例代码

<template>
  <div id="app">
    <button @click="currentComponent = 'ComponentA'">显示组件A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件B</button>
    <button @click="currentComponent = 'ComponentC'">显示组件C</button>

    <!-- 使用 <component> 组件实现动态组件渲染 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA' // 默认显示组件A
    };
  },
  components: {
    ComponentA: {
      template: '<div>组件A</div>'
    },
    ComponentB: {
      template: '<div>组件B</div>'
    },
    ComponentC: {
      template: '<div>组件C</div>'
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

在这个示例中，点击不同的按钮会动态切换显示不同的组件。<component> 组件的 is 属性值发生变化时，会重新渲染指定的组件。

实现原理

• Vue 的 <component> 组件通过 is 属性动态决定渲染哪个组件。
• 当 is 属性的值变化时，Vue 会卸载当前组件并加载新的组件。
• <component> 并没有自身的渲染效果，它只是一个占位符，用来动态切换其他组件。

3. 使用 keep-alive 保持状态

默认情况下，切换动态组件时，组件的状态会被销毁。如果希望在组件切换后保持其状态，可以使用 Vue 内置的 <keep-alive> 组件。<keep-alive> 组件会缓存不活动的组件实例，而不是销毁它们。

示例代码

<template>
  <div id="app">
    <button @click="currentComponent = 'ComponentA'">显示组件A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件B</button>
    <button @click="currentComponent = 'ComponentC'">显示组件C</button>

    <!-- 使用 <keep-alive> 组件保持动态组件的状态 -->
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA' // 默认显示组件A
    };
  },
  components: {
    ComponentA: {
      template: '<div>组件A</div>'
    },
    ComponentB: {
      template: '<div>组件B</div>'
    },
    ComponentC: {
      template: '<div>组件C</div>'
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

在这个示例中，组件切换后依然保持其状态，组件的状态不会被销毁。<keep-alive> 会缓存不活动的组件实例，使其在重新激活时保持之前的状态。

缓存状态原理

• <keep-alive> 组件会缓存不活动的组件实例，而不是销毁它们。
• 当组件被切换出去时，组件实例会被缓存而不会被销毁；当组件被切换回来时，组件实例会被重新激活，保持之前的状态。

4. keep-alive 对应的生命周期函数

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数；当组件被激活时，会自动触发组件的 activated 生命周期函数。

示例代码

<template>
  <div id="app">
    <button @click="currentComponent = 'ComponentA'">显示组件A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件B</button>
    <button @click="currentComponent = 'ComponentC'">显示组件C</button>

    <!-- 使用 <keep-alive> 组件保持动态组件的状态 -->
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA' // 默认显示组件A
    };
  },
  components: {
    ComponentA: {
      template: '<div>组件A</div>',
      activated() {
        console.log('组件A被激活');
      },
      deactivated() {
        console.log('组件A被缓存');
      }
    },
    ComponentB: {
      template: '<div>组件B</div>',
      activated() {
        console.log('组件B被激活');
      },
      deactivated() {
        console.log('组件B被缓存');
      }
    },
    ComponentC: {
      template: '<div>组件C</div>',
      activated() {
        console.log('组件C被激活');
      },
      deactivated() {
        console.log('组件C被缓存');
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

在这个示例中，当组件被激活时会触发 activated 钩子函数，当组件被缓存时会触发 deactivated 钩子函数。

组件生命周期

• 当组件被激活时，调用的是该组件内部的 activated 钩子函数，而不是父组件的 activated 钩子函数。
• 当组件被缓存时，调用的是该组件内部的 deactivated 钩子函数。

5. keep-alive 的 include 属性

include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔。<keep-alive> 组件通过 include 属性可以有选择地缓存某些组件，而不缓存其他组件。

示例代码

<template>
  <div id="app">
    <button @click="currentComponent = 'ComponentA'">显示组件A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件B</button>
    <button @click="currentComponent = 'ComponentC'">显示组件C</button>

    <!-- 使用 <keep-alive> 组件保持动态组件的状态，并指定缓存的组件 -->
    <keep-alive include="ComponentA,ComponentC">
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA' // 默认显示组件A
    };
  },
  components: {
    ComponentA: {
      template: '<div>组件A</div>',
      activated() {
        console.log('组件A被激活');
      },
      deactivated() {
        console.log('组件A被缓存');
      }
    },
    ComponentB: {
      template: '<div>组件B</div>',
      activated() {
        console.log('组件B被激活');
      },
      deactivated() {
        console.log('组件B被缓存');
      }
    },
    ComponentC: {
      template: '<div>组件C</div>',
      activated() {
        console.log('组件C被激活');
      },
      deactivated() {
        console.log('组件C被缓存');
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

缓存体现

• 只有 include 属性匹配的组件名称才会被缓存，其他组件切换出去后会被销毁。
• 当缓存的组件切换回来时，组件状态保持不变。