Vue.js技术内幕 1-2 Vue3设计

Vue.js设计

1. Vue.js 3.x的优化

1. 源码优化
   • 使用monorepo
     • 源码中相对重要的两块：packages、scripts。
     • 根据功能不同将代码拆分到packages目录下的不同子目录中，各个子目录有自己的API、类型定义、测试文件等。模块拆分更细、责任划分更明确，模块间的依赖关系更明显，可读性、可维护性更好。
     • scripts，存放编译构建的相关代码。
   • 使用TypeScript开发
     • Vue2采用Flow进行静态类型检查，Vue3采用TypeScript进行类型检查，能进行更好的类型检查，支持更复杂的类型推导，由于源码本身使用TypeScript编写，省去了维护d.ts文件的麻烦。
2. 性能优化
   • 源码体积优化
     • 移除一些冷门的功能 如 fi1ter、inline-template等，减小包的体积
     • 引入Tree Shaking技术，减小打包体积
   • 数据劫持优化
     • 使用Proxy代替Object.defineProperty进行数据劫持
       • Object.defineProperty不能检测对象属性的添加和删除操作
       • 对于嵌套层级较深的对象，无法判断运行时到底会访问哪个属性，如果要劫持内部深层次的对象变化，就需要递归遍历整个对象，执行Object.defineProperty把每一个层对象数据都变成响应式的。性能开销较大
   • 编译优化
     • 区分动态内容与静态内容，更新性能与动态节点数量而非模板整体大小相关
     • 静态提升，将静态节点、静态props提取为常量，脱离渲染函数，减少重复创建VNode的开销，降低内存占用
     • 树摇优化，基于 ES 模块的静态分析，移除非必要代码，减小打包体积
     • 缓存优化，缓存事件处理函数，避免函数重复创建，减少不必要的更新
     • 更高效的源码生成，生成更加精简和高效的代码，提高运行时性能8
     • 更好的TypeScript支持，改进类型推断，提供更好的开发体验和更强的类型安全性
3. 语法API优化
   • 优化逻辑组织，使用Composition API，将某个逻辑关注点相关的代码全部放在一个函数里
   • 优化逻辑复用，使用hooks函数提取公共逻辑进行复用，避免命名冲突、数据来源不清晰的问题
4. 引入RFC，通过RFC，了解每一个功能被采用或废弃的前因后果

---

---

2. Vue.js 3.x源码总览

• packages模块

  • compiler-core，与平台无关的编译器核心代码，包括编译器的基础编译流程：解析模板生成AST-AST的节点转换—根据AST生成代码。在AST的节点转换过程中，会执行很多转换插件，compiler-core则包含所有与平台无关的转换插件。
  • compiler-dom，针对浏览器的转换插件。
  • compiler-ssr，针对服务端渲染的转换插件。
  • compiler-sfc，解析.vue文件、template、script、style。
  • reactivity，响应式系统的实现。
  • runtime-core，与平台无关的运行时核心实现，包括虚拟DOM的喧染器、组件实现和一些全局的JS API
  • runtime-dom，以浏览器为目标的运行时，包括对原生DOMAPI、属性、样式、事件等的管理。
  • runtime-test，用于测试runtime-core的轻量级运行时
  • server-renderer，包含了服务端渲染的核心实现
  • sfc-playground，用于调试SFC单文件组件编译输出的工具
  • shared，包含多个包共享的内部实用工具库
  • size-check，用于检测tree-shaking后vue运行时的代码体积。
  • template-explorer，用于调试模板编译输出的工具。
  • vue，vue是面向用户的完整构建，包括运行时版本和带编译器的版本。
  • vue-compat，vue3的一个构建版本，提供可配置的Vue2兼容行为。

• 版本

  • 源码通过编译，会构建出不同版本的Vuejs，应用场景各不相同：CDN直接导入、配合打包工具使用、用于服务端渲染。
  • 1.完整版本，包含编译器
    • UMD模块格式，适用于CDN引用，在浏览器中编译模版，vue.js (开发) / vue.min.js (生产)
    • ESM模块格式，适用于通过 <script type="module"> 直接引入的现代浏览器，vue.esm.browser.js
  • 2.运行时版本，不包含编译器
    • UMD模块格式，适用于通过 CDN 引入且使用 render 函数或预编译模板的场景，vue.runtime.js
    • ESM，用于 Webpack、Rollup 等现代构建工具，vue.runtime.esm.js
    • CommonJS，用于 Browserify 或 Webpack 1 等旧版构建工具，vue.runtime.common.js
  • 3.服务端渲染版本，不包含编译器
    • CommonJS，用于 Node.js 服务器端渲染，vue.cjs.js

• 编译构建

  • 在源码编译构建的过程中，会先收集编译目标，然后执行并行编译，最终通过rollup工具完成单个包的编译。
  • 在运行rollup编译单个包时，它会从每个包的packagejson中读取相关的编译配置，最终编译生成不同的目标文件。

---

---

---

参考&感谢各路大神

• [Vue.js技术内幕-黄轶]