Vue（八）：动态组件、异步组件和组件边界

5、动态组件、异步组件

　　1）、动态组件
　　之前我们谈过v-if和v-show的区别：如果使用v-show，切换组件，只不过是相应组件的显示和隐藏；而v-if则会销毁之前的组件并渲染新组建。如果我们在v-if切换的组件之外，套上<keep-alive>标签，那么本该销毁的组件则会被缓存起来。当我们重新切换回来时依旧会重新渲染（确实找不到对应的dom元素），但是之前的vue实例没有被销毁，vue实例中的属性和变量都还在，这个标签非常适合做单页面应用。
　　谈到动态组件，这里也简单谈谈is和component吧。is是一个属性，意思就是将一个节点，或者一个组件，变成is引用的组件。而component呢，本身就是一个无属性组件，不加上is属性会报错，可以说是专门为了配合is写的组件。下面的例子就介绍了，如何利用<keep-alive>标签、component组件和is属性，做页面导航。

<template>
  <div>
    <button v-for="tab in tabStrs" :key="tab.id" @click="tabName=tab.id">{{tab.name}}</button>
    <div style="border:1px solid orange;">
        <keep-alive><component :is="tabName"></component></keep-alive>
    </div>
  </div>
</template>

<script>
import demo from "@/study/component/Demo.vue";
import demo1 from "@/study/component/Demo1.vue";
export default {
  components:{demo,demo1},
  data(){
    return{
      tabStrs:[
        {id:"demo",name:"组件注册、prop"},
        {id:"demo1",name:"自定义事件"},
      ],
      tabName:"demo",
    }
  }
}
</script>

　　2）、异步组件
　　以app.vue为例，如果我们在这个页面静态引入了一万个组件，那么该app.vue生成的文件会包含这一万个组件的信息，那这个文件就会变得很大，浏览器引用这个几M大的js，会加载的比较慢，甚至很慢。
　　但是，如果我们使用的是异步组件，也就是懒加载（千辛万苦查到的别名），那么这一万个组件大概会生成一万个js，当vue需要调取哪个组件时，就会从服务器获取对应的js，加载进来。这样的话，app作为主程序，打开的速度就变快了，除非它确实一打开就需要加载1万个组件。后面，把官网的代码粘进来吧。

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})  //这是导入局部组件的方法

　　如果后面有需要再给异步加载单独写一篇吧