阅读Vue源码--前置知识

2021-03-08 本文已影响0人翔子丶

Flow

认识 Flow

JavaScript 静态类型检查器，vue 源码利用 Flow 做静态类型检查
为什么用 Flow

js 动态类型语言，类型检查发展趋势，在编译期尽早发现 bug，不影响代码运行，使编写 js 有强类型语言的体验

FLow 工作方式

类型推断：通过变量的使用上下文推断变量类型，更具推断来检查类型

// Flow
function split(str) {
  return str.split('')
}

split(11)
// Flow检查报错，split期待的参数使字符串，而不是数字

类型注释：事先注释好期待的类型，Flow 会基于这些注释来判断

// Flow
function add(x: number, y: number): number {
  return x + y
}

add('Hello', 11)
// 类型推断不需要编写类型注释 特定场景需要类型注释提供更明确的检查

Flow 在 Vue.js 源码的应用

第三方库或自定义类型 Flow 并不认识，检查时报错，因此 FLow 提出 libdef 用来识别，在 Vue.js 主目录下有.flowconfig 文件，这里的[libs]配置的是 flow，表示指定的库定义都在 flow 文件夹内，阅读源码时，遇到某个类型可以在这里查看数据结构的定义

Vue 源码目录

src
├─compiler 编译相关
├─core Vue 核心库
├─platforms 平台相关代码
├─server SSR，服务端渲染
├─sfc .vue 文件编译为 js 对象
└─shared 公共的代码

compiler

包含 Vue.js 所有编译相关的代码，将模板解析为 ast 语法树，ast 语法树优化，代码生成等

编译工作推荐在构建时做（借助 webPack、vue-loader 等辅助插件）
core

Vue.js 核心代码，包括内置组件、全局 API 封装、Vue 实例化、观察者、虚拟 DOM、工具函数等
platform

Vue.js 是跨平台的 MVVM 框架，可在 web 和 native 客户端上，platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 和 weex 上的 Vue.js
server

服务端渲染相关逻辑，主要是泡在服务端的 node.js
sfc

将单文件组件解析册成 javaScript 对象
shared

浏览器端和服务端所共享的工具方法

Vue 源码调试设置

打包工具 Rollup
- Vue.js 源码的打包工具使用的是 Rollup，比 Webpack 轻量
- Webpack 把所有文件当做模块，Rollup 只处理 js 文件更适合在 Vue.js 这样的库中使用
- Rollup 打包不会生成冗余的代码
安装依赖

npm i
设置 sourcemap

package.json 文件中的 dev 脚本中添加参数 --sourcemap

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:webfull-dev"
执行 dev

npm run dev 执行打包，用的是 rollup，-w（watcher）参数是监听文件的变化，文件变化自动重新打打包，-c 设置配置文件，--environment 设置环境变量，根据环境变量打包成不同版本的 vue

在 dist 目录中打包生成两个文件

image-20210304084053706.png

调试
- examples示例中引入的 vue.min.js 改为 vue.js
- 打开 Chrome 的调试工具中的 source

image-20210304084317757.png

Vue 的不同构建版本

npm run build 重新打包所有文件
官方文档 - 对不同构建版本的解释
dist\README.md

image-20210304084412637.png

不同版本
- 完整版：同时包含编译器和运行时的版本。
- 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码，体积大、效率低。
- 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码，体积小、效率高。基本上就是除去编译器的代码。
- UMD：UMD 版本通用的模块版本，支持多种模块方式。 vue.js 默认文件就是运行时 + 编译器的 UMD 版本
- CommonJS(cjs)：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。
- ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件，为现代打包工具提供的版本
  - ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包
  - ES6 模块与 CommonJS 模块的差异

Runtime + Compiler vs. Runtime-only

// Compiler
// 需要编译器，把 template 转换成 render 函数
// const vm = new Vue({
//   el: "#app",
//   template: "<h1>{{ msg }}</h1>",
//   data: {
//     msg: "Hello Vue",
//   },
// });
// Runtime
// 不需要编译器
const vm = new Vue({
  el: '#app',
  render(h) {
    return h('h1', this.msg)
  },
  data: {
    msg: 'Hello Vue'
  }
})

推荐使用运行时版本，因为运行时版本相比完整版体积要小大约 30%

基于 Vue-CLI 创建的项目默认使用的是 vue.runtime.esm.js

通过查看 webpack 的配置文件vue inspect > output.js

image-20210304085010850.png

*.vue 文件中的模板是在构建时预编译的，最终打包后的结果不需要编译器，只需要运行时版本即可

阅读Vue源码--前置知识

Flow

Vue 源码目录

Vue 源码调试设置

Vue 的不同构建版本

猜你喜欢

热点阅读