当前位置：首页 > article >正文

VUE中的组件加载方式

article 2026/4/10 20:29:28

加载方式有哪些，及如何进行选择

常规的静态引入是在组件初始化时就加载所有依赖的组件，而懒加载则是等到组件需要被渲染的时候才加载。

对于大型应用，可能会有很多组件，如果一开始都加载，可能会影响首屏加载时间。如果某些组件在首屏不需要，比如弹窗或者标签页里的内容，那么懒加载会更好，减少初始加载时间，实现时使用动态导入和异步组件，同时注意处理加载状态和错误处理。。反之，如果组件在页面初始化时就必须显示，那么静态加载更合适，因为懒加载可能会导致组件显示延迟，甚至出现闪烁。

首屏必需的组件静态加载，非必需的懒加载。根据组件的使用频率和重要性，结合同步和异步加载。

两种加载策略对比

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';// 定义异步组件 ComponentAconst ComponentA = defineAsyncComponent(() => import('./ComponentA.vue'));// 定义异步组件 ComponentBconst 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 = trueawait 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 = trueconst stopWatch = watch(editRef,(newVal) => {if (newVal && typeof newVal.showDialog === 'function') {newVal.showDialog(type, row)stopWatch() // 停止监听}},{ immediate: true })}

* 使用 watch 监听 editRef 的变化，避免了轮询的性能消耗。