(三) -动态组件和异步组件——使用 keep-alive和:is 保存动态组件的状态 & 路由的懒加载，就是加载异步组件-用到的时候加载，不用的时候不加载

动态组件和异步组件——使用 keep-alive 和:is保存动态组件的状态 & 路由的懒加载，就是加载异步组件-用到的时候加载，不用的时候不加载

• 例如：登录和注册切换的时候——类似于v-show，但其不能缓存组件

• 地址：

  动态组件和异步组件

动态组件

什么是动态组件：
就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。
动态切换：（:is后面的是对应的组件名，是变量，必须一致）
在挂载点使用component标签，然后使用v-bind:is**=”组件名”**，会自动去找匹配的组件名，如果没有，则不显示；
改变挂载的组件，只需要修改is指令的值即可

<keep-alive>
   <component :is="componentID"></component>
</keep-alive>

• 使用 keep-alive 保存动态组件的状态，否则会重新注册组件，created里面会再次显示状态，

  需要在data中操作：

   data () {
      return {
        // 导入组件的名字，是字符串形式
        componentId: 'Login',
        showModal: false
      }
    },
  

异步组件-用到的时候加载，不用的时候不加载

• 当需要的时候再去加载组件
• 路由的懒加载，就是加载异步组件

components: {
  Login: () => import('./components/Login'),
  Register: () => import('./components/Register')
}

示例：

第一步：新建登录组件文件login.vue和注册组件文件register.vue

login.vue中

<template>
  <div>
    这是一个登录组件
  </div>
</template>

<script>
export default {
  created () {
    console.log('login-created')
  }
}
</script>

<style>

</style>

register.vue

<template>
  <div>
    这是一个注册组件
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

第三步：在App.vue中进行引入、注册、使用

//异步组件时，以下两个不进行引入
import Login from './components/03-login'
import Register from './components/04-register'

//components中，
//同步组件
 Login 
 Register
 //异步组件
  Login: () => import('./components/03-login'),
  Register: () => import('./components/04-register'),
 
   <!-- 6. 动态组件和异步组件 -->
    <h1>6. 动态组件和异步组件</h1>
    <input type="button" value="登录" @click="componentId='Login'">
    <input type="button" value="注册" @click="componentId='Register'">
        
     <keep-alive>
      <component :is="componentId"></component>
    </keep-alive>

第四步：npm run serve 或 npm start 后，打开http://localhost:8080/ 查看切换效果：