vue——动态组件，异步组件

动态组件

组件使用

<component v-bind:is=""></component>、

is属性接收参数为：

1. 已注册组件的名字
2. 一个组件的选项对象

component标签可以当作组件的挂载点，我们可以通过修改is属性的值动态切换显示的组件，比如实现一个选项卡类型的功能。

缓存动态组件

如果需要将切换的组件缓存，可以使用keep-alive包裹component标签

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

异步组件

官网说明：

在开发大型项目的时候，我们会把大型项目根据组件分割为小块代码，然后异步加载代码块，这样可以让首屏部分代码块优先加载，加快首屏渲染速度，其他代码块在需要的时候再加载，加载过的代码块会被缓存起来，以便复用重新渲染。

比如：有些组件不会在第一次进入首屏时加载，而是当执行了某些操作时，才会加载进来，所以此时，我们可以将该组件设置成异步加载，什么时候用，什么时候再加载进来，以达到提升首屏性能的目的。

异步组件使用方法：

components: {
    
      
	组件name: () => import ('组件url');
}

有点像路由的懒加载。

如果不使用异步组件，那么不管你有没有操作，它都会先加载进来，这样就比较耗费性能。

如：写一个组件，当点击按钮后才让组件加载显示，当设置成异步加载时。

<template>
  <div class="home">
    <A v-if="show"></A>
    <B v-if="show"></B>
    <button @click="show=!show">切换</button>
  </div>
</template>
<script>

export default {
    
    
  components:{
    
    
    A:()=>import ('../components/a'), //A组件内容，我是异步加载的A组件
    B:()=>import ('../components/b')  //B组件内容，我是异步加载的B组件
  },
  data () {
    
    
    return {
    
    
      show:false
    }
  },
  mounted () {
    
    

  },
  methods: {
    
    

  },
}
</script>

你可以在network中试验，使用ctrl+f查找组件中的文字；

会发现组件没有出现时，无法查找到内容；、
当我们点击按钮后

组件出现，network中多加载了一个js文件，可以搜索到A，B组件中的内容。
并且多次切换不会重复加载。

性能更好！

高级异步组件:

const asyncComponent = () => ({
    
    
  component: './my-async-component',
  delay: 200, // 延迟加载，默认200毫秒
  error: errorComponent, // 加载失败显示组件
  loading: loadingComponent, // 加载时使用组件
  timeout: 2000 // 超时时间，默认 Infinity
})

知乎大佬关于异步组件的介绍