分析vue3源码23（异步组件实现）

eason_fan2025-01-23 17:52

Vue3 异步组件实现分析

前言

在大型应用中，我们需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现这个功能。本节将分析其内部实现原理。

1. 异步组件的基本使用

typescript 复制代码 
// 基础用法
const AsyncComp = defineAsyncComponent(
  () => import("./components/MyComponent.vue")
);

// 带配置的用法
const AsyncCompWithOptions = defineAsyncComponent({
  loader: () => import("./components/MyComponent.vue"),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000,
});

2. 核心实现分析

defineAsyncComponent 的实现主要分为三个部分：组件定义、加载控制和状态管理。让我们逐步分析其实现原理：

2.1 组件定义

typescript 复制代码 
export function defineAsyncComponent<
  T extends Component = { new (): ComponentPublicInstance }
>(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T {
  // 1. 统一配置格式
  if (isFunction(source)) {
    source = { loader: source };
  }

  const {
    loader,
    loadingComponent,
    errorComponent,
    delay = 200,
    timeout,
    suspensible = true,
    onError: userOnError,
  } = source;

  // 2. 维护组件状态
  let pendingRequest: Promise<ConcreteComponent> | null = null;
  let resolvedComp: ConcreteComponent | undefined;

  // 3. 返回一个包装组件
  return {
    name: "AsyncComponentWrapper",
    __asyncLoader: load,
    setup() {
      // setup 实现...
    },
  };
}

这个包装组件是一个特殊的组件定义，它包含：

  • __asyncLoader: 用于手动触发加载
  • setup 函数: 处理组件的实际加载和渲染逻辑

2.2 加载控制

typescript 复制代码 
// 1. 重试机制
let retries = 0;
const retry = () => {
  retries++;
  pendingRequest = null;
  return load();
};

// 2. 加载函数
const load = (): Promise<ConcreteComponent> => {
  let thisRequest: Promise<ConcreteComponent>;
  return (
    pendingRequest ||
    (thisRequest = pendingRequest =
      loader()
        .catch((err) => {
          if (userOnError) {
            // 3. 错误处理
            return new Promise((resolve, reject) => {
              const userRetry = () => resolve(retry());
              const userFail = () => reject(err);
              userOnError(err, userRetry, userFail, retries + 1);
            });
          } else {
            throw err;
          }
        })
        .then((comp) => {
          // 4. 防止重复加载
          if (thisRequest !== pendingRequest && pendingRequest) {
            return pendingRequest;
          }
          return comp;
        }))
  );
};

加载控制的关键点：

  1. pendingRequest 缓存：避免重复发起加载请求
  2. 重试机制：支持加载失败后重试
  3. 错误处理：提供用户自定义的错误处理
  4. 请求竞态处理：确保使用最新的加载结果

2.3 状态管理与渲染

typescript 复制代码 
setup() {
  const instance = currentInstance!;

  // 1. 缓存检查
  if (resolvedComp) {
    return () => createInnerComp(resolvedComp!, instance);
  }

  // 2. 错误处理
  const onError = (err: Error) => {
    pendingRequest = null;
    handleError(err);
  };

  // 3. Suspense 集成
  if (__FEATURE_SUSPENSE__ && suspensible && instance.suspense) {
    return load()
      .then((comp) => {
        return () => createInnerComp(comp, instance);
      })
      .catch((err) => {
        onError(err);
        return () =>
          errorComponent
            ? createVNode(errorComponent, { error: err })
            : null;
      });
  }

  // 4. 响应式状态
  const loaded = ref(false);
  const error = ref();
  const delayed = ref(!!delay);

  // 5. 延迟处理
  if (delay) {
    setTimeout(() => {
      delayed.value = false;
    }, delay);
  }

  // 6. 超时处理
  if (timeout != null) {
    setTimeout(() => {
      if (!loaded.value && !error.value) {
        const err = new Error(
          `Async component timed out after ${timeout}ms.`
        );
        onError(err);
        error.value = err;
      }
    }, timeout);
  }

  // 7. 开始加载
  load()
    .then(() => {
      loaded.value = true;
    })
    .catch((err) => {
      onError(err);
      error.value = err;
    });

  // 8. 条件渲染
  return () => {
    if (loaded.value && resolvedComp) {
      return createInnerComp(resolvedComp, instance);
    } else if (error.value && errorComponent) {
      return createVNode(errorComponent, {
        error: error.value,
      });
    } else if (loadingComponent && !delayed.value) {
      return createVNode(loadingComponent);
    }
  };
}

setup 函数的执行过程：

  1. 检查缓存：如果组件已加载，直接返回
  2. 设置错误处理函数
  3. 处理 Suspense 集成：如果在 Suspense 中使用，返回 Promise
  4. 创建响应式状态：跟踪加载、错误和延迟状态
  5. 设置延迟定时器：控制 loading 组件的显示时机
  6. 设置超时定时器：处理加载超时情况
  7. 触发组件加载：更新状态并处理错误
  8. 返回渲染函数：根据不同状态渲染不同内容

这个实现通过状态管理和条件渲染，优雅地处理了异步组件的各种场景：

  • 首次加载时显示 loading
  • 加载成功时显示实际组件
  • 加载失败时显示错误组件
  • 支持重试和超时处理

2.4 渲染过程分析

异步组件的渲染是通过一个动态的渲染函数来实现的，这个渲染函数会根据组件的不同状态返回不同的 VNode：

typescript 复制代码 
// 渲染函数的实现
return () => {
  if (loaded.value && resolvedComp) {
    // 1. 已加载状态：渲染实际组件
    // - loaded.value 为 true 表示组件已加载完成
    // - resolvedComp 是加载得到的实际组件定义
    return createInnerComp(resolvedComp, instance);
  } else if (error.value && errorComponent) {
    // 2. 错误状态：渲染错误组件
    // - error.value 包含具体的错误信息
    // - 将错误信息通过 props 传递给错误组件
    return createVNode(errorComponent, {
      error: error.value,
    });
  } else if (loadingComponent && !delayed.value) {
    // 3. 加载状态：渲染加载组件
    // - delayed.value 控制是否延迟显示
    // - 只有在 delay 时间后才显示加载组件
    return createVNode(loadingComponent);
  }
  // 4. 初始状态：不渲染任何内容
  return null;
};

让我们看看 createInnerComp 的实现：

typescript 复制代码 
function createInnerComp(
  comp: ConcreteComponent,
  { vnode: { ref, props, children } }: ComponentInternalInstance
) {
  // 1. 创建包含实际组件的 vnode
  const vnode = createVNode(comp, props, children);

  // 2. 继承外层异步组件的 ref
  vnode.ref = ref;

  return vnode;
}

渲染过程的状态转换：

javascript 复制代码 
初始渲染
┌─────────────┐
│    null     │ ─── delay 时间后 ──┐
└─────────────┘                    ▼
                            ┌─────────────┐
                            │  Loading    │
                            └─────────────┘
                                   │
                    ┌──────────────┴──────────────┐
                    ▼                             ▼
 ┌─────────────┐                         ┌─────────────┐
 │   Error     │ ◄── 重试失败 ── 重试 ── │ AsyncComp   │
 └─────────────┘                         └─────────────┘

渲染函数的特点：

  1. 响应式驱动：

    • 通过 ref 管理组件状态
    • 状态变化自动触发重新渲染

  2. 条件渲染：

    • 优先级：实际组件 > 错误组件 > 加载组件
    • 通过 delayed.value 控制加载组件的显示时机

  3. 状态传递：

    • 错误信息通过 props 传给错误组件
    • 实际组件继承异步组件的 props 和 children

  4. 引用处理：

    • 保持 ref 的正确传递
    • 确保组件树的完整性

这种实现方式确保了：

  • 渲染过程的平滑过渡
  • 良好的用户体验
  • 错误处理的可靠性
  • 状态管理的响应式

3. 关键特性实现

3.1 延迟加载

typescript 复制代码 
// 延迟显示 loading 组件
if (delay) {
  setTimeout(() => {
    delayed.value = false;
  }, delay);
}

// 渲染时的处理
if (loadingComponent && !delayed.value) {
  return createVNode(loadingComponent);
}

3.2 超时处理

typescript 复制代码 
if (timeout != null) {
  setTimeout(() => {
    if (!loaded.value && !error.value) {
      const err = new Error(`Async component timed out after ${timeout}ms.`);
      onError(err);
      error.value = err;
    }
  }, timeout);
}

3.3 错误重试

typescript 复制代码 
const retry = () => {
  retries++;
  pendingRequest = null;
  return load();
};

// 用户自定义错误处理
if (userOnError) {
  return new Promise((resolve, reject) => {
    const userRetry = () => resolve(retry());
    const userFail = () => reject(err);
    userOnError(err, userRetry, userFail, retries + 1);
  });
}

4. 使用示例

typescript 复制代码 
// 基础异步组件
const AsyncComponent = defineAsyncComponent(
  () => import("./components/MyComponent.vue")
);

// 完整配置示例
const AsyncComponentWithOptions = defineAsyncComponent({
  // 加载函数
  loader: () => import("./components/MyComponent.vue"),

  // 加载中显示的组件
  loadingComponent: {
    template: "<div>Loading...</div>",
  },

  // 出错时显示的组件
  errorComponent: {
    template: "<div>Error!</div>",
  },

  // 延迟显示加载组件的时间
  delay: 200,

  // 超时时间
  timeout: 3000,

  // 错误处理
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      // 重试
      retry();
    } else {
      // 失败
      fail();
    }
  },
});

5. 总结

Vue3 异步组件的实现特点：

  1. 灵活的配置选项：

    • 支持简单函数和详细配置对象
    • 提供 loading/error 状态组件
    • 可配置延迟和超时时间

  2. 完善的错误处理：

    • 支持自定义错误处理
    • 内置重试机制
    • 超时自动失败

  3. 优秀的性能考虑：

    • 组件加载结果缓存
    • 避免重复加载
    • 支持 Suspense 集成

  4. 用户体验保障：

    • 延迟显示 loading 状态
    • 加载出错时优雅降级
    • 可定制的重试策略

这种实现方式既保证了代码分割的性能优化，又提供了良好的用户体验，是大型应用开发中不可或缺的功能。

相关推荐
沈梦研2 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
轻口味2 小时前
Vue.js 组件之间的通信模式
vue.js
limit for me4 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者4 小时前
如何构建一个简单的React应用？
前端·react.js·前端框架
fmdpenny5 小时前
Vue3初学之商品的增，删，改功能
开发语言·javascript·vue.js
涔溪5 小时前
有哪些常见的 Vue 错误？
前端·javascript·vue.js
VillanelleS7 小时前
React进阶之高阶组件HOC、react hooks、自定义hooks
前端·react.js·前端框架
亦黑迷失7 小时前
vue 项目优化之函数式组件
前端·vue.js·性能优化
计算机-秋大田8 小时前
基于SpringBoot的高校教师科研的设计与实现(源码+SQL脚本+LW+部署讲解等)
java·vue.js·spring boot·后端·课程设计
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04xgboost: Why not implement distributed XGBoost on top of spark05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06密码学原理技术-第六章-introduction to pulibc-key cryptography07PyTorch AMP 混合精度中grad_scaler.py的scale函数解析08Windows10安装PCL1.14.0及点云配准09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10如何实现抖音直播弹幕抓取（PHP版本）