Vue3源码学习5-不使用 `const enum` 的原因

---

前言

Vue 3 官方不使用 const enum 的原因，主要出于兼容性、构建工具支持和维护性方面的考虑。以下是详细解释：

---

✅ 什么是 const enum

const enum 是 TypeScript 的特性，它会在编译阶段被 完全内联展开，不会生成额外的 JavaScript 枚举对象。

// const enum
const enum Shape {
  Circle,
  Square
}

const s = Shape.Circle  // 编译后 -> const s = 0;

---

❌ 为什么 Vue 3 不使用 const enum

1. 📦 影响构建工具兼容性

• const enum 必须由 TypeScript 编译器（tsc）进行处理。

• 如果项目使用 Babel、ESBuild、Vite、Rollup 等工具链，它们默认并不支持 const enum，导致构建失败或行为不一致。

• 例如：

  • Babel 转译阶段不会处理 const enum，需要额外插件才能支持。
  • 但这些插件会破坏 Vue 的通用构建流程。

Vue 3 选择构建兼容性强的库，需要兼容各种构建工具。

---

2. 🔁 难以做模块间 tree-shaking

• const enum 被内联后，丧失了静态引用关系（例如 Shape.Circle 被替换成字面量 0）。
• 这会影响 tree-shaking（例如只用一个枚举值，Tree-shaking 无法剔除其他的值）。

---

3. 🧪 调试困难

• 内联后的代码在调试阶段看不到 EnumName.Value 的标识，堆栈、日志输出变成了普通数字。
• 不利于开发者阅读错误信息、排查问题。

---

4. 📦 Vue 是库，不掌控用户配置

• const enum 需要启用 isolatedModules: false（否则 Babel/Vite 报错）。
• 但 Vue 是一个库，不能假设使用者配置了符合要求的 TypeScript 编译器或插件链。

---

✅ 官方推荐做法：普通 enum

Vue 3 通常采用 普通 enum 或 字面量联合类型：

// 普通 enum
export enum PatchFlags {
  TEXT = 1,
  CLASS = 1 << 1
}

或者

export const enum PatchFlags {
  // 开发者构建阶段改为 const，生产构建禁止使用 const
}

---

🔚 总结

原因	const enum 不适用原因说明
构建兼容性差	不兼容 Babel/Vite/ESBuild 等
Tree-shaking 不友好	被内联后丧失静态引用关系
调试困难	被转为字面量后影响可读性
对使用者构建环境要求高	违反 Vue 设计的通用性原则

---