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

文章目录

  • 前言
    • ✅ 什么是 `const enum`
    • ❌ 为什么 Vue 3 不使用 `const enum`
      • 1. 📦 **影响构建工具兼容性**
      • 2. 🔁 **难以做模块间 tree-shaking**
      • 3. 🧪 **调试困难**
      • 4. 📦 **Vue 是库,不掌控用户配置**
    • ✅ 官方推荐做法:普通 `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 设计的通用性原则

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/79417.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++学习:六个月从基础到就业——C++11/14:lambda表达式

C学习&#xff1a;六个月从基础到就业——C11/14&#xff1a;lambda表达式 本文是我C学习之旅系列的第四十篇技术文章&#xff0c;也是第三阶段"现代C特性"的第二篇&#xff0c;主要介绍C11/14中引入的lambda表达式。查看完整系列目录了解更多内容。 引言 Lambda表达…

AIDC智算中心建设:计算力核心技术解析

目录 一、智算中心发展概览 二、计算力核心技术解析 一、智算中心发展概览 智算中心是人工智能发展的关键基础设施&#xff0c;基于人工智能计算架构&#xff0c;提供人工智能应用所需算力服务、数据服务和算法服务的算力基础设施&#xff0c;融合高性能计算设备、高速网络以…

IoTDB时序数据库V2.0.2大版本更新的一些梳理

一些小知识&#xff1a; 关于事务&#xff1a;时序数据库是没有事务的&#xff0c;它和关系数据库的应用场景不同&#xff0c;通常情况下不需要多点同时操作同一条数据&#xff0c;而且要保证极高的吐出量&#xff0c;事务太消耗资源&#xff0c;并且时序数据库提供了覆写的功能…

CSS定位详解

在前端开发中&#xff0c;CSS 定位&#xff08;positioning&#xff09;是一个核心概念&#xff0c;它决定了元素在页面上的位置和布局方式。无论是构建复杂的交互界面&#xff0c;还是实现简单的页面排版&#xff0c;CSS 定位都是不可或缺的工具。本文将全面介绍 CSS 中的五种…

React 语法扩展

useReducer钩子函数 不同action类型返回不同处理行为 useState()函数返回解构为两个值 state当前状态 dispatch修改状态函数 dispatch()函数参数为一个actuon对象 如 &#xff1a; 样例&#xff1a; import { useReducer } from react; import ./App.css;// 定义一个Reduce…

MCP协议与Dify集成教程

一、MCP协议概述 MCP&#xff08;Model Control Protocol&#xff09;是一种新兴的开放协议&#xff0c;为大型语言模型&#xff08;LLM&#xff09;与外部应用之间构建了双向通信通道。它就像是AI的"USB-C"接口&#xff0c;帮助模型发现、理解并安全调用各种外部工…

学习springboot-条件化配置@Conditional(条件注解)

前言 在Spring Boot中&#xff0c;Conditional 注解及其相关注解是用于条件化配置的重要工具。它们允许开发者根据特定条件决定是否加载某个Bean或配置类。 注意&#xff1a;Conditional 相关注解&#xff0c;通常和Bean搭配使用 学习springboot-Bean管理&#xff08;Bean 注…

2025年- H18-Lc126-54.螺旋矩阵(矩阵)---java版

1.题目描述 2.思路* 思路1&#xff1a; 补充2&#xff1a; directions[1][0] // 表示“下”这个方向的行增量&#xff08;1&#xff09; directions[1][1] // 表示“下”这个方向的列增量&#xff08;0&#xff09; int[][] directions {{0, 1}, {1, 0}, {0, -1}, {-…

微信小程序连续多个特殊字符自动换行解决方法

效果图 .wxml <view class"container"><text>没转换{{text}}</text><view style"height: 60rpx;" /><text>转换后{{convert}}</text> </view>.js Page({data: {text:&#xff01;&#xff01;&#xff01;&am…

编程速递-RAD Studio 12.3 Athens四月补丁:关注软件性能的开发者,安装此补丁十分必要

2025年4月22日&#xff0c;Embarcadero发布了针对RAD Studio 12.3、Delphi 12.3以及CBuilder 12.3的四月补丁。此更新旨在提升这些产品的质量&#xff0c;特别关注于Delphi编译器、C 64位现代工具链、RAD Studio 64位IDE及其调试器、VCL库和其他RAD Studio特性。强烈建议所有使…

Linux 进程基础(二):操作系统

目录 一、什么是操作系统&#xff1a;用户和电脑之间的「翻译官」&#x1f310; OS 的层状结构&#x1f9e9; 案例解析&#xff1a;双击鼠标的「跨层之旅」 二、操作系统的必要性探究&#xff1a;缺乏操作系统的环境面临的挑战剖析&#x1f511; OS 的「管理者」属性&#xff1…

第 11 届蓝桥杯 C++ 青少组中 / 高级组省赛 2020 年真题,选择题详细解释

一、选择题 第 2 题 在二维数组按行优先存储的情况下&#xff0c;元素 a[i][j] 前的元素个数计算如下&#xff1a; 1. **前面的完整行**&#xff1a;共有 i 行&#xff0c;每行 n 个元素&#xff0c;总计 i * n 个元素。 2. **当前行的前面元素**&#xff1a;在行内&#x…

1️⃣7️⃣three.js_OrbitControls相机控制器

17、相机轨道控制器 3D虚拟工厂在线体验相机轨道控制器OrbitControls 它是 Three.js 中最常用的交互控制器之一,专门用于通过鼠标/触摸控制相机围绕一个目标点(target)旋转、缩放和平移。import {OrbitControls } from three/addons/controls/OrbitControls.js; const cont…

以下是在 Ubuntu 上的几款PDF 阅读器,涵盖轻量级、功能丰富和特色工具:

默认工具&#xff1a;Evince&#xff08;GNOME 文档查看器&#xff09; 特点&#xff1a;Ubuntu 预装&#xff0c;轻量快速&#xff0c;支持基本标注和书签。 安装&#xff1a;已预装&#xff0c;或手动安装&#xff1a; sudo apt install evince功能全面&#xff1a;Okular&…

基于用户场景的汽车行驶工况构建:数据驱动下的能耗优化革命

行业现状&#xff1a;标准工况与用户场景的割裂 全球汽车行业普遍采用WLTC工况进行能耗测试&#xff0c;但其与真实道路场景差异显著。据研究&#xff0c;WLTC工况下车辆能耗数据比实际道路低10%-30%&#xff0c;导致用户对续航虚标投诉激增&#xff08;数据来源&#xff1a;东…

chili3d调试10 网页元素css node deepwiki 生成圆柱体 生成零件图片

.input是input的外框&#xff0c;.input input是input的内框 沙雕 全部input都换成textarea了 自己的方法用接口定义&#xff0c;把自己的方法pub出去&#xff0c;定义在内部拉出去只是取个值 这其实是mainwindow端pub回来的 窗口pub端把数据pub回 mainwindow端让mainwindow端…

Redis 启用 TLS 加密传输配置

Redis 启用 TLS 加密传输配置 一、Redis TLS 加密概述 Redis 从 6.0 版本开始原生支持 TLS 加密传输&#xff0c;可以保护客户端与服务器之间的通信安全&#xff0c;防止数据被窃听或篡改。 二、准备工作 确认 Redis 版本‌&#xff1a; redis-server --version确保版本 ≥…

【Linux】深入理解程序地址空间

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;Linux 目录 前言 一、什么是程序地址空间 二、深入理解程序地址空间 1. 引例 2. 理解地址转化 3. 再谈程序地址空间 4. 补充知识 总结 前言 在现代操作系…

【深度学习-Day 5】Python 快速入门:深度学习的“瑞士军刀”实战指南

Langchain系列文章目录 01-玩转LangChain&#xff1a;从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块&#xff1a;四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain&#xff1a;从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…

解决在 Linux 中 WPS 字体缺失问题

解决在 Linux 中 WPS 字体缺失问题 安装方式 安装方式 首先下载你所需要的字体文件 在字体文件所在的目录下右键点击在命令行中打开 或 Open in Terminal sudo mkdir /usr/share/fonts/myfontssudo cp ./* /usr/share/fonts/myfonts执行命令&#xff0c;更新字体缓存 sudo fc…