加载方式有哪些，及如何进行选择
常规的静态引入是在组件初始化时就加载所有依赖的组件，而懒加载则是等到组件需要被渲染的时候才加载。
对于大型应用，可能会有很多组件，如果一开始都加载，可能会影响首屏加载时间。如果某些组件在首屏不需要，比如弹窗或者标签页里的内容，那么懒加载会更好，减少初始加载时间，实现时使用动态导入和异步组件，同时注意处理加载状态和错误处理。。反之，如果组件在页面初始化时就必须显示，那么静态加载更合适，因为懒加载可能会导致组件显示延迟，甚至出现闪烁。
首屏必需的组件静态加载，非必需的懒加载。根据组件的使用频率和重要性，结合同步和异步加载。
两种加载策略对比
1.静态加载（初始加载/同步加载）
优点：组件立即可用，无渲染延迟
缺点：如果组件较多或较大，会增加初始加载时间，影响首屏渲染速度。
适合场景：首屏核心组件、高概率使用的组件、小型组件
2.异步加载（按需加载）
优点：减小初始包体积，提升首屏速度
缺点：首次渲染需要加载时间，可能造成短暂延迟。实现稍微复杂，需要处理加载状态（如加载中、加载失败等）。
适合场景：非首屏组件、弹窗/抽屉等交互型组件、复杂大型组件
代码示例
1. 静态加载
<template>
<div>
<ComponentA />
<ComponentB />
</div>
</template>
<script setup>
// 导入组件
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
</script>2. 异步加载
2.1Vue的defineAsyncComponent来按需加载组件。
<template>
<div>
<ComponentA />
<ComponentB />
</div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
// 异步导入 LoadingSpinner 组件
import LoadingSpinner from './LoadingSpinner.vue';
// 定义异步组件 ComponentA
const ComponentA = defineAsyncComponent(() => import('./ComponentA.vue'));
// 定义异步组件 ComponentB
const ComponentB = defineAsyncComponent({
loader: () => import('./ComponentB.vue'),
loadingComponent: LoadingSpinner, // 加载状态组件
delay: 200, // 延迟显示loading的时间
timeout: 3000 // 超时时间
});
</script>2.2使用动态导入
<template>
<div>
<ComponentA v-if="showComponentA" />
<button @click="loadComponentA">Load Component A</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showComponentA = ref(false);
const ComponentA = shallowRef(null);//使用shallowRef来保存组件，因为组件对象不需要深度响应式,避免不必要的响应式开销
const loadComponentA = async()=> {
const module = await import('./ComponentA.vue');
ComponentA.value = module.default;
showComponentA.value = true;
}
</script>若需调用引入组件中的某些方法，需进行一些处理。
问题原因
在 Vue 3 中，ref 绑定到组件实例时，ref 的值会在组件挂载完成后才被赋值。当你第一次调用 handleEdit 时，<Edit> 组件可能还没有完成挂载，因此 editRef.value 为 null。第二次调用时，组件已经挂载完成，所以 editRef.value 能够正确获取到组件实例。
根本原因
-
异步组件加载延迟：
-
使用 defineAsyncComponent 加载的组件是异步的，组件加载和挂载需要时间。
-
在 showEdit.value = true 后，组件开始加载，但加载和挂载是异步的，因此 editRef.value 不会立即被赋值。
-
-
nextTick 的局限性：
-
nextTick 只会等待当前 DOM 更新完成，但不会等待异步组件加载完成。
-
因此，即使使用 nextTick，editRef.value 仍然可能为 null。
-
1、使用 Promise 和 requestAnimationFrame 轮询检查
<Edit v-if="showEdit" ref="editRef" @fetch-data="fetchData" />
<script setup>
const editRef = ref(null)
const showEdit = ref(false)
const Edit = defineAsyncComponent(() => import('./components/edit'))
const handleEdit = async (type, row) => {
showEdit.value = true
await new Promise((resolve) => {
const checkComponentLoaded = () => {
if (editRef.value && typeof editRef.value.showDialog === 'function') {
resolve()
requestAnimationFrame(checkComponentLoaded)
}
}
checkComponentLoaded()
})
editRef.value.showDialog(type, row)
}
</script>* 使用 requestAnimationFrame 进行轮询会不断消耗性能，因为它会在每一帧都执行检查逻辑。
* 如果组件加载时间较长，轮询逻辑可能会持续运行，导致性能问题。
2、使用 watch 监听 editRef 的变化
<Edit v-if="showEdit" ref="editRef" @fetch-data="fetchData" />
const editRef = ref(null)
const showEdit = ref(false)
const Edit = defineAsyncComponent(() => import('./components/edit'))
const handleEdit = async (type, row) => {
showEdit.value = true
const stopWatch = watch(
editRef,
(newVal) => {
if (newVal && typeof newVal.showDialog === 'function') {
newVal.showDialog(type, row)
stopWatch() // 停止监听
}
},
{ immediate: true }
)
}* 使用 watch 监听 editRef 的变化，避免了轮询的性能消耗。
