Vue3 源码分析 02 - 框架设计的核心要素

大家也可以去我的博客看相关技术文章，欢迎大家，一同进步！！！！

• Vue3 源码分析 01 - 权衡的艺术
• Vue3 源码分析 02 - 框架设计的核心要素

vue3 源码分析，第二章 框架设计的核心要素

目录

控制代码体积

环境变量

if (__DEV__ && !res) {
  warn(
    `Failed to mount app: mount target selector "${container}" returned null.`
  );
}

这里的__DEV__就是环境变量，vue构建生产资源的时候就会移除掉这部分，因为他是dead code永远不会执行

tree-shaking

Tree-Shaking 指的就是消除那些永远不会被执行的代码，也就是排除 dead code，现在无论是 rollup.js 还是 webpack，都支持 Tree-Shaking。

• Tree-Shaking 只对 ES Module 有效
• Tree-Shaking 依赖静态的模块结构

构建不同的产物

• 生产环境的 vue.global.prod.js 不含警告信息
• 开发环境的 vue.global.js，包含必要警告信息

这是构建产物基于环境的输出，除此之外还有别的，而这些构建产物都是基于对应的需求

直接使用<script>标签 - IIFE

有时候，我们可能html直接使用<script>标签，使用vue,此时我们需要IIFE

直接使用<script>标签 - ES Module

<script type="module" src="/path/to/vue.esm-browser.js"></script>

随着技术的发展和浏览器的支持，现在主流浏览器对原生 ESM的支持都不错，所以用户除了能够使用 <script> 标签引用 IIFE 格式的资源外，还可以直接引入 ESM 格式的资源，例如 Vue.js 3 还会 输出 vue.esm-browser.js 文件，用户可以模块引入

同时补充 ESModule的构建产物也有两种 给浏览器环境，和给打包工具的

• 浏览器 esm-browser.js
• 打包工具 esm-bundler.js

node端使用 - cjs

服务端渲染SSR， 会使用到cjs格式的构建产物

特性开关

本质上是利用rollup.js的预定义常量插件来实现

if (__VUE_OPTIONS_API__) {
  currentInstance = instance;
  pauseTracking();
  applyOptions(instance, Component);
  resetTracking();
  currentInstance = null;
}

错误处理

// utils.js
let handleError = null;
export default {
  foo(fn) {
    callWithErrorHandling(fn);
  },
  // 用户可以统一注册错误处理函数
  registerErrorHandler(fn) {
    handleError = fn;
  },
};
function callWithErrorHandling(fn) {
  try {
    fn && fn();
  } catch (e) {
    // 将捕获到的错误传递给用户的错误处理程序
    handleError(e);
  }
}

使用

import utils from "./utils";
utils.registerErrorHandler(e => {
  console.error(e);
});

vue中的

import App from "App.vue";
const app = createApp(App);
app.config.errorHandler = () => {
  // 错误处理程序
};

类型支持

采用 Typescript

总结

• tree-sharing 基于 ESM 实现
• 基于需求会有各种的构建产物
  • 浏览器 esm-browser.js
  • 打包工具 esm-bundler.js
• 特性开关
• 统一的错误处理接口
• 类型支持