⚡演讲范围:本模块只会分析响应式部分内容和编译原理相关的,只会提及不会太深入分析
⚡无奖问答：按照你目前的理解，在前端工程化项目中什么是编译时和运行时？
编译时
一个引子：如果和一个老外沟通，你的英文不好。你说的是中文，老外却只理解英文。那你们两个人怎么沟通呢？需要一个翻译器来将你说的中文转换为英文。
可以将 编译 这个词语理解为 翻译。
转到vue方面,我们平时写 Vue 代码时一般都是写在文件后缀名为 .vue 单文件中。
但是浏览器认识后缀为 .vue 的单文件组件 (SFC) 吗？浏览器肯定是不认识的，所以这个时候需要将后缀为 .vue 的单文件组件 (SFC) 编译（翻译）为浏览器认识的 js 文件，这一过程就是我们常说的编译时。
在前端中，一般来说 编译时 就是代码跑在 node.js 的阶段,这就是你前端需要node环境的原因。
前端主要分为两个环境：生产环境和开发环境。
对于开发环境来说，编译时 就是在执行类型 npm dev 这种启动命令，同样将源代码编译成浏览器可直接执行的代码这一过程。和生产环境不同的是生成的代码文件是存在内存中，并不会写到磁盘中。这一过程是在 Node.js 中完成的。
对于生产环境来说，编译时 就是在执行类似 npm build 之类的命令，将源代码打包成浏览器可直接执行的代 码这一过程。打包生成的代码文件是存在磁盘中。
运行时
浏览器的渲染过程是将一个 HTML 文件渲染到页面上的。在 SPA 单页面中浏览器接收到的 index.html 一般是下面这样的，如下图：
从上图中可以看到接收到的 HTML 文件中只有一个 <div id="app"></div>，那么浏览器又是怎么从这个空 div 渲染成丰富多彩的页面呢？
使用 Vue 的同学应该比较清楚，首先是生成一个 app 对象，然后调用 app 对象的 mount 方法将经过编译时处理后拿到的 Vue 组件对象挂载到 <div id="app"></div> 上面。
这一过程就是所谓的运行时。
对于前端来说，运行时就是代码执行在浏览器的阶段。
总结：
对于前端开发来说 一般情况下 编译时 就是代码跑在 Node.js 的阶段，比如执行 npm dev 或者 npm build 时代码在 Node.js 中执行的阶段。运行时实际就是代码在浏览器中执行的阶段。
还有一种特殊的情况，像全局构建版本的 Vue 中会内置一个编译器。让我们可以脱离 Webpack 或者 Vite 使用 Vue，这种情况就是在浏览器中进行编译的模式，当然这种模式的性能肯定不如使用构建工具 Webpack 或者 Vite 提前将资源进行打包。
⚡了解模块化规范
（1）概念
在工程化项目中，由于代码之间会发生大量交互，如果结构不合理，这些代码就会变得难以维护、难以测试、难以调试。而使用模块化就解决了这些问题，模块化的特点如下：
- 可重用性： 当应用被组织成模块时，可以方便的在其他地方重用这些模块，避免编写重复代码，从而加快开发流程；
- 可读性： 当应用变得越来越复杂时，如果在一个文件中编写所有功能，代码会变得难以阅读。如果使用模块设计应用，每个功能都分布在各自的模块中，代码就会更加清晰、易读；
- 可维护性： 软件的美妙之处在于进化，从长远来看，我们需要不断为应用增加新的功能。当应用被结构化为模块时，可以轻松添加或删除功能。除此之外，修复错误也是软件维护的一部分，使用模块就可以更快速地定位问题。
模块化是一种将系统分离成独立功能部分的方法，可以将系统分割成独立的功能部分，严格定义模块接口，模块间具有透明性。通过将代码进行模块化分隔，每个文件彼此独立，开发者更容易开发和维护代码，模块之间又能够互相调用和通信，这就是现代化开发的基本模式。
（2）模式
JavaScript 模块包含三个部分：
- 导入： 在使用模块时，需要将所需模块作为依赖项导入。例如，如果想要创建一个 vue 组件，就需导入 vue 模块。要使用像 Lodash 这样的工具库，就需要安装并导入它作为依赖项；
- 代码： 模块具体代码；
- 导出： 模块接口，从模块中导出的内容可供导入模块的任何地方使用。
（3）类型
模块化的贯彻执行离不开相应的约定，即规范。这是能够进行模块化工作的重中之重。实现模块化的规范有很多，比如：AMD、RequireJS、CMD、SeaJS、UMD、CommonJS、ES6 Module。除此之外，IIFE（立即执行函数）也是实现模块化的一种方案。
- IIFE： 立即调用函数表达式
- AMD： 异步模块加载机制
- CMD： 通用模块定义
- UMD： 统一模块定义
- CommonJS： Node.js 采用该规范
- ES 模块： JavaScript 内置模块系统
目前主流浏览器都支持 ES 模块：如果想在浏览器中使用原生 ES 模块方案，只需要在 script 标签上添加 type="module" 属性。通过该属性，浏览器知道这个文件是以模块化的方式运行的。
例如:vue3中使用esm；尝试删除 type="module" ,去掉后整个项目完全无法运行。可见 type="module" 的含金量。
