Interpretación del código fuente de Vue (1) - Prefacio

Cuando el aprendizaje se convierte en un hábito, el conocimiento se convierte en sentido común. Gracias por gusta , favoritos y comentarios .

Se enviarán nuevos videos y artículos a la cuenta pública de WeChat lo antes posible, bienvenido a seguir: Li Yongning lyn

El artículo ha sido incluido en el repositorio de github liyongning/blog Bienvenido a Watch and Star.

Introducción

La primera parte de la columna presenta principalmente el propósito, la planificación, la población adecuada de la columna, así como los conocimientos básicos de preparación y alfabetización.

prefacio

Recientemente, estoy preparando algunos artículos y videos de la serie Vue. He leído el código fuente de Vue varias veces antes, pero nunca he escrito artículos relacionados, así que planeo escribir uno recientemente.

Objetivo

Dominar los principios del código fuente de la pila de tecnología Vue es el objetivo final de esta serie de artículos.

En primer lugar, se interpretará a partir del código fuente de Vue y se producirán una serie de artículos y vídeos, a partir del análisis detallado del código fuente, hasta 手写 Vue 1.0y Vue 2.0. Después de eso, se producirán análisis de código fuente y series de escritura a mano de bibliotecas relacionadas con la ecología circundante, como: vuex, vue-router, vue-cli, etc.

Creo que después de esta serie de estudios serios, todos pueden escribir esto en su currículum: Competente en el principio del código fuente de la pila de tecnología Vue .

adecuado para la multitud

Competente en el uso de la pila de tecnología Vue para el desarrollo diario (agregar, eliminar, modificar y verificar)
Quiere entender el principio de implementación del marco en profundidad
Estudiantes que quieran cambiar de trabajo o subirse el sueldo con el jefe (no vale añadir, borrar, modificar y revisar)

Cómo aprender

Para una serie de artículos, el aprendizaje secuencial es, naturalmente, lo mejor, pero si tiene algún conocimiento del código fuente o está particularmente interesado en una parte determinada, también puede leer directamente los artículos correspondientes.

Muchas personas están acostumbradas a usar tiempo fragmentado para estudiar, por supuesto, no hay problema con los artículos de comida rápida, pero si quieres estudiar en profundidad, se recomienda sentarse frente a la computadora y usar todo el tiempo para estudiar. aprende por ti mismo.

记住：光看不练假把式，所以在学习过程中一定要勤动手，不动笔墨不读书，像笔记、思维导图、示例代码、为源码编写注释、debug 调试等，该上就上，绝对不能偷懒。

如果你觉得该系列文章对你有帮助，欢迎大家点赞、关注，也欢迎将它分享给你身边的小伙伴。

准备

现在最新的 Vue 2 的版本号是 2.6.12，所以我就以当前版本的代码进行分析和学习。

下载 Vue 源码

git 命令

git clone https://github.com/vuejs/vue.git
复制代码

去 github 手动下载然后解压

装包

执行 npm i 安装依赖，待装到端到端测试工具时可直接 ctrl + c 掉，不影响后续源码的研读。

source map

在 package.json -> scripts 中的 dev 命令中添加 --sourcemap，这样就可以在浏览器中调试源码时查看当前代码在源码中的位置。

{
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"
  }
}
复制代码

开发调试

执行以下命令，启动开发环境：

npm run dev
复制代码

看到如下效果，并在 dist 目录下生成 vue.js.map 文件，则表示成功。到这里所有的准备工作均已完成，但是不要将当前命令行 ctrl + c 掉，因为你在阅读源码时会需要向源码中添加注释，甚至改动源码，当前命令可以监测源码的改动，如果发现改动会自动进行打包；如果关闭当前命令行，你会发现，随着你注释代码的编写，在浏览器中调试源码时会出现和源码映射的偏差。所以为了更好的调试体验就别关闭它。

扫盲

执行 npm run build 命令之后会发现在 dist 目录下生成一堆特殊命名的 vue.*.js 文件，这些特殊的命名分别是什么意思呢？

构建文件分类

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)	vue.min.js	vue.common.prod.js
Runtime-only (production)	vue.runtime.min.js	vue.runtime.common.prod.js

名词解释

Full：这是一个全量的包，包含编译器（compiler）和运行时（runtime）。
Compiler：编译器，负责将模版字符串（即你编写的类 html 语法的模版代码）编译为 JavaScript 语法的 render 函数。
Runtime：负责创建 Vue 实例、渲染函数、patch 虚拟 DOM 等代码，基本上除了编译器之外的代码都属于运行时代码。
UMD：兼容 CommonJS 和 AMD 规范，通过 CDN 引入的 vue.js 就是 UMD 规范的代码，包含编译器和运行时。
CommonJS：典型的应用比如 nodeJS，CommonsJS 规范的包是为了给 browserify 和 webpack 1 这样旧的打包器使用的。他们默认的入口文件为 vue.runtime.common.js。
ES Module：现代 JavaScript 规范，ES Module 规范的包是给像 webpack 2 和 rollup 这样的现代打包器使用的。这些打包器默认使用仅包含运行时的 vue.runtime.esm.js 文件。

运行时（Runtime）+ 编译器（Compiler） vs. 只包含运行时（Runtime-only）

如果你需要动态编译模版（比如：将字符串模版传递给 template 选项，或者通过提供一个挂载元素的方式编写 html 模版），你将需要编译器，因此需要一个完整的构建包。

当你使用 vue-loader 或者 vueify 时，*.vue 文件中的模版在构建时会被编译为 JavaScript 的渲染函数。因此你不需要包含编译器的全量包，只需使用只包含运行时的包即可。

只包含运行时的包体积要比全量包的体积小 30%。因此尽量使用只包含运行时的包，如果你需要使用全量包，那么你需要进行如下配置：

webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

复制代码

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})
复制代码

Browserify

Add to your project's package.json:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}
复制代码

源码目录结构

通过目录结构的阅读，对源码有一个大致的了解，知道哪些东西需要去哪看。

├── benchmarks                  性能、基准测试
├── dist                        构建打包的输出目录
├── examples                    案例目录
├── flow                        flow 语法的类型声明
├── packages                    一些额外的包，比如：负责服务端渲染的包 vue-server-renderer、配合 vue-loader 使用的的 vue-template-compiler，还有 weex 相关的
│   ├── vue-server-renderer
│   ├── vue-template-compiler
│   ├── weex-template-compiler
│   └── weex-vue-framework
├── scripts                     所有的配置文件的存放位置，比如 rollup 的配置文件
├── src                         vue 源码目录
│   ├── compiler                编译器
│   ├── core                    运行时的核心包
│   │   ├── components          全局组件，比如 keep-alive
│   │   ├── config.js           一些默认配置项
│   │   ├── global-api          全局 API，比如熟悉的：Vue.use()、Vue.component() 等
│   │   ├── instance            Vue 实例相关的，比如 Vue 构造函数就在这个目录下
│   │   ├── observer            响应式原理
│   │   ├── util                工具方法
│   │   └── vdom                虚拟 DOM 相关，比如熟悉的 patch 算法就在这儿
│   ├── platforms               平台相关的编译器代码
│   │   ├── web
│   │   └── weex
│   ├── server                  服务端渲染相关
├── test                        测试目录
├── types                       TS 类型声明
复制代码

链接

感谢各位的：点赞、收藏和评论，我们下期见。

当学习成为了习惯，知识也就变成了常识。 感谢各位的点赞、收藏和评论。

Se enviarán nuevos videos y artículos a la cuenta pública de WeChat lo antes posible, bienvenido a seguir: Li Yongning lyn

El artículo ha sido incluido en el repositorio de github liyongning/blog Bienvenido a Watch and Star.