Vue源码的概述

Vue 源码的获取

• 项目地址：https://github.com/vuejs/vue
• Fork 一份到自己仓库，克隆到本地，可以自己写注释提交到 github
• 为什么分析 Vue 2.6
• 到目前为止 Vue 3.0 的正式版还没有发布
• 新版本发布后，现有项目不会升级到 3.0，2.x 还有很长的一段过渡期
• 3.0 项目地址：https://github.com/vuejs/vue-next

源码主要目录结构

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

了解 Flow

• 官网：https://flow.org/
• JavaScript 的静态类型检查器
• Flow 的静态类型检查错误是通过静态类型推断实现的
  • 文件开头通过 // @flow 或者 /* @flow */ 声明

/* @flow */
function square(n: number): number {
return n * n;
} s
quare("2"); // Error!

调试设置

打包

打包工具 Rollup

Vue.js 源码的打包工具使用的是 Rollup，比 Webpack 轻量

Webpack 把所有文件当做模块，Rollup 只处理 js 文件更适合在 Vue.js 这样的库中使用

Rollup 打包不会生成冗余的代码

安装依赖

设置 sourcemap

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

执行 dev

npm run dev 执行打包，用的是 rollup，-w 参数是监听文件的变化，文件变化自动重新打 包

结果：

Vue 的不同构建版本

npm run build 重新打包所有文件

官方文档 - 对不同构建版本的解释

dist\README.md

术语:

• 完整版：同时包含编译器和运行时的版本。
• 编译器：用来将模板字符串编译成为 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 文件中的模板是在构建时预编译的，最终打包后的结果不需要编译器，只需要运行时版本即可

什么是虚拟 DOM

虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射到 DOM。Vue.js 中的虚拟 DOM 借鉴了 Snabbdom，并添加了一些 Vue.js 中的特性，例如：指令和组件机制。

Vue 1.x 中细粒度监测数据的变化，每一个属性对应一个 watcher，开销太大Vue 2.x 中每个组件对应一个 watcher，状态变化通知到组件，再引入虚拟 DOM 进行比对和渲染

为什么要使用虚拟 DOM

• 使用虚拟 DOM，可以避免用户直接操作 DOM，开发过程关注在业务代码的实现，不需要关注如
• 何操作 DOM，从而提高开发效率
• 作为一个中间层可以跨平台，除了 Web 平台外，还支持 SSR、Weex。
• 关于性能方面，在首次渲染的时候肯定不如直接操作 DOM，因为要维护一层额外的虚拟 DOM，如果后续有频繁操作 DOM 的操作，这个时候可能会有性能的提升，虚拟 DOM 在更新真实 DOM之前会通过 Diff 算法对比新旧两个虚拟 DOM 树的差异，最终把差异更新到真实 DOM