Vue 异步组件

异步组件是 vue 的一种新能优化的方法，比如可以运用在首屏加载等等场景。

异步组件就是组件通过 import() 函数引入，什么时候需要什么时候才加载

<!-- 父组件 -->
<template>
    <div>
        <Button @click="show = true">显示Form</Button>
        <FormCom v-if="show"/>
    </div>
</template>

<script>
export default {
    components: {
        FormCom: () => import('./FormCom')
    },
    data() {
        return {
            show: false
        }
    }
}
</script>

<!-- 子组件 -->
<template>
  <input type="text" :value="value">
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

 

 以上的示例中，初始化的时候我们不需要展示子组件，当点击按钮之后才需要加载子组件。在这样的情况下，我们就可以用异步组件来优化性能；

上图显示的是初始化的情况。这个时候我们打开浏览器的 network，先清空所有请求。点击按钮，我们发现 network 有一个请求，就说明这个子组件是异步加载的