VUE中的组件加载方式

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

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

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

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

两种加载策略对比

1.静态加载（初始加载/同步加载）

优点：组件立即可用，无渲染延迟

缺点：如果组件较多或较大，会增加初始加载时间，影响首屏渲染速度。

适合场景：首屏核心组件、高概率使用的组件、小型组件

2.异步加载（按需加载）

优点：减小初始包体积，提升首屏速度

缺点：首次渲染需要加载时间，可能造成短暂延迟。实现稍微复杂，需要处理加载状态（如加载中、加载失败等）。

适合场景：非首屏组件、弹窗/抽屉等交互型组件、复杂大型组件

代码示例

1. 静态加载

2. 异步加载

2.1Vue的defineAsyncComponent来按需加载组件。

2.2使用动态导入

若需调用引入组件中的某些方法，需进行一些处理。

问题原因

在 Vue 3 中，ref 绑定到组件实例时，ref 的值会在组件挂载完成后才被赋值。当你第一次调用 handleEdit 时， 组件可能还没有完成挂载，因此 editRef.value 为 null。第二次调用时，组件已经挂载完成，所以 editRef.value 能够正确获取到组件实例。

根本原因

1. 异步组件加载延迟：

   • 使用 defineAsyncComponent 加载的组件是异步的，组件加载和挂载需要时间。

   • 在 showEdit.value = true 后，组件开始加载，但加载和挂载是异步的，因此 editRef.value 不会立即被赋值。

2. nextTick 的局限性：

   • nextTick 只会等待当前 DOM 更新完成，但不会等待异步组件加载完成。

   • 因此，即使使用 nextTick，editRef.value 仍然可能为 null。

1、使用 Promise 和 requestAnimationFrame 轮询检查

* 使用 requestAnimationFrame 进行轮询会不断消耗性能，因为它会在每一帧都执行检查逻辑。

* 如果组件加载时间较长，轮询逻辑可能会持续运行，导致性能问题。

2、使用 watch 监听 editRef 的变化

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 的变化，避免了轮询的性能消耗。