VUE组件——动态组件、组件缓存

动态组件：多个组件同时使用同一个挂载点，并动态的进行切换，就是动态组件

<template>
  <div>
      <button @click="comName = 'page1'">page1</button>
      <button @click="comName = 'page2'">page2</button>

      <p>下面显示注册组件-动态切换:</p>
      <div>
          <component :is="comName"></component>
          
          //vue内置component组件, 配合is属性, 设置要显示的组件名字
          
      </div>
  </div>
</template>

<script>
import page1 from './components/page1'
import page2 from './components/page2'
export default {
    data(){
        return {
            comName: "page1"
        }
    },
    components: {
        page1,
        page2
    }
}

组件缓存：当组件动态切换较为频繁时，组件会经常创建和销毁，影响性能。
Vue内置了 keep-alive 组件，可以让被keep-alive包裹的组件存储在内存中而不被销毁。

<template>
  <div>
     <keep-alive>
          <component :is="comName"></component>
     </keep-alive>  
  </div>
</template>

补充：被 keep-alive 包裹的组件会有两个生命周期

• activated - 激活状态
• deactivated - 失去激活状态

同时有两个对应的钩子方法：
activated - 激活时触发
deactivated - 失去激活时触发