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

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

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

目录

控制代码体积

环境变量

js 复制代码
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

html 复制代码
<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的预定义常量插件来实现

js 复制代码
if (__VUE_OPTIONS_API__) {
  currentInstance = instance;
  pauseTracking();
  applyOptions(instance, Component);
  resetTracking();
  currentInstance = null;
}

错误处理

js 复制代码
// 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);
  }
}

使用

js 复制代码
import utils from "./utils";
utils.registerErrorHandler(e => {
  console.error(e);
});

vue中的

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

类型支持

采用 Typescript

总结

  • tree-sharing 基于 ESM 实现
  • 基于需求会有各种的构建产物
    • 浏览器 esm-browser.js
    • 打包工具 esm-bundler.js
  • 特性开关
  • 统一的错误处理接口
  • 类型支持
相关推荐
用户261245834016127 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川1 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术2 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再3 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了3 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
不讲道理的柯里昂3 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷3 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401613 小时前
vue学习路线(10.监视属性-watch)
前端·vue.js
慧一居士4 小时前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku4 小时前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js