关于vue.js:Vue-源码解读1-前言

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

新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁 lyn

文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。

简介

专栏的第一篇，次要介绍专栏的目标、布局、适用人群，以及筹备工作和扫盲的基础知识。

前言

最近在筹备一些 Vue 系列的文章和视频，之前 Vue 的源码也读过好几遍，然而始终没写相干的文章，所以最近就打算写一写。

指标

精通 Vue 技术栈的源码原理，这是这系列的文章最终目标。

首先会从 Vue 源码解读开，会产出一系列的文章和视频，从具体刨析源码，再到 手写 Vue 1.0 和 Vue 2.0。之后会产出周边生态相干库的源码剖析和手写系列，比方：vuex、vue-router、vue-cli 等。

置信通过这一系列的认真学习，大家都能够在本人的简历上写上这么一条：精通 Vue 技术栈的源码原理。

适宜人群

• 纯熟应用 Vue 技术栈进行日常开发（增删改查）
• 想深刻理解框架实现原理
• 想跳槽 或 跟老板提涨薪的同学（增删改查不值钱）

如何学习

对于系列文章，程序学习天然最好，但如果你自身对源码有一些理解或者对某一部分特地感兴趣，也能够间接看相应对应的文章。

很多人习惯利用碎片化工夫去学习，对于快餐类的文章当然没有问题，然而如果你想深刻学习，还是倡议坐在电脑前用整块的工夫对照着文章亲自动手去学。

记住：光看不练假把式，所以在学习过程中肯定要勤入手，不动笔墨不读书，像笔记、思维导图、示例代码、为源码编写正文、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 文件，这些非凡的命名别离是什么意思呢？

构建文件分类

名词解释

• 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 类型申明

链接

• 配套视频，关注微信公众号回复：” 精通 Vue 技术栈源码原理视频版 ” 获取
• 精通 Vue 技术栈源码原理 专栏
• github 仓库 liyongning/Vue 欢送 Star

感激各位的：点赞 、 珍藏 和评论，咱们下期见。

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

新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁 lyn

文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。