异步组件是 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 有一个请求,就说明这个子组件是异步加载的