动态组件、组件缓存

动态组件

多个组件使用一个挂载点，并动态切换，就是动态组件

需求：完成一个注册功能页面，2个按钮，一个填写注册信息，一个填写用户简介信息 

步骤

• 定义两个组件 UserName.vue，UserInfo.vue 2个组件
• 引入到 App.vue组件中
• data中定义变量来存放要显示的组件名
• 要设置挂载点 <component>，使用 is 属性来设置要显示哪个组件
• 点击按钮，修改变量里的组件名

App.vue

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码</button>
    <button @click="comName = 'UserInfo'"> 个人信息 </button>
    <p> 下面显示动态切换组件 </p>
    <div style=" border: 1px solid red;">
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
/*
同一个挂载点要切换不同组件  显示
    1. 创建要切换的组件  标签+样式
    2. 引入到要展示的vue文件内，注册
    3. 变量  承载要显示的组件名
    4. 设置挂载点  <component :is="变量"></component>
    5. 点击按钮 切换comName值为要显示的组件名
*/
import UserName from './components/UserName.vue'
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      comName: 'UserName',
    }
  },
  methods: {

  },
  components: {
    UserName,
    UserInfo,
  }
}
</script>

 UserName.vue

<template>
    <div>
        <p>用户名：<input type="text"></p>
        <p>密码：<input type="password" name="" id=""></p>
    </div>
</template>

<script>
export default {
}
</script>

<style scoped></style>

UserInfo.vue

<template>
    <div>
        <p>人生格言 个人习惯</p>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped></style>

缺点：要切换的组件很多时，要在根组件引入很多组件

组件动态不常用，组件路由更常用

组件缓存 

组件切换会导致组件被频繁的销毁和重新创建，性能不高

使用vue内置的keep-alive组件，可以让包裹的组件保存在内存中不被销毁

演示：给UserName.vue 和 UserInfo.vue 注册created 和 destroyed 生命周期事件，观察创建和销毁的过程

使用 keep-alive 内置的vue组件，让动态组件缓存

语法：

        Vue内置的keep-alive组件，包裹要频繁切换的组件

App.vue

    <div style=" border: 1px solid red;">
      <!-- vue内置的keep-alive组件，把包起来的组件缓存起来 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>

补充生命周期

activated  激活时触发

deactivated  失去激活状态触发

<template>
    <div>
        <p>用户名：<input type="text"></p>
        <p>密码：<input type="password" name="" id=""></p>
    </div>
</template>

<script>
export default {
    created() {
        console.log('UserName创建');
    },
    destroyed() {
        console.log('UserName销毁');
    },
    // 组件缓存下 多了两个钩子函数
    activated() {
        console.log("activated");
    },
    deactivated() {
        console.log("deactivated");
    }
}
</script>