vue3按需加载子组件

在Vue3中，按需加载子组件（也称为懒加载或动态导入）是一种优化性能的技术，特别是在大型应用中，可以避免一次性加载所有子组件，而是在需要的时候才实例化它们。这通常通过使用`import()`函数配合`v-if`或`v-show`指令来实现。

例如，在模板上：

<template>
  <button @click="loadChildComponent">点击加载子组件</button>
  <component :is="lazyChild" v-if="showLazyChild"></component>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const showLazyChild = ref(false);
const lazyChild = () => import('./ChildComponent.vue');

async function loadChildComponent() {
  showLazyChild.value = true; // 显示子组件
  await lazyChild(); // 动态导入组件
}
</script>

在这个例子中，当用户点击按钮时，`loadChildComponent`函数会被触发，设置`showLazyChild`为真，然后异步导入`ChildComponent`。只有当`showLazyChild`为真的时候，该子组件才会被渲染并实例化。