准备工作

介绍

这是一个基于vue2.6版本的源码分析。为什么在目前vue3已经较为普及的环境下，仍然去更新vue2的源码分析呢？一方面呢

前置准备

拉取代码

bash

git clone https://github.com/vuejs/vue.git

源码目录文件

拉完后自己可以先自行浏览一下源码目录。下面给出了源码目录的核心部分。

.
├─complier                      # 编译相关，包括将模版解析成ast语法树，ast语法树优化，代码生成等功能
├─core                          # vue的核心库，与平台无关，包括响应式原理，虚拟dom等
├─platforms                     # 平台相关，vue可以跑在web上，也可以配合weex跑在native客户端上
├─server                        # 服务端渲染相关
├─sfc                           # 单文件组件文件编译成js对象，通常都会编写单文件组件，然后使用webpack构建
├─shared                        # 一些公共的代码，包括常量和公共方法

Quiz Time👇

源码文件的打包工具是什么？它和 webpack 有什么区别？

✅ vue 源码的打包工具是 rollup，关于构建相关的内容在 scripts 文件下，构建后将输出文件。webpack 把所有文件当成模块，rollup 只处理 js，更适合在 vue 这样的库中使用，不会产生冗余的代码。一般在构建一些 lib 的时候可以选择 rollup, 而在构建一些应用的时候，选择 webpack。

构建版本类型

vue的构建版本主要分为三种，分别是：

完整版同时包含编译时和运行时的版本
编译版将模板字符串编译成为js渲染函数的代码，体积大，效率低
运行时创建vue实例，渲染并处理虚拟dom等的代码，体积小，效率高

这个系列的分析主要以 UMD 完整版的 Vue 来学习，可以通过<script>标签直接用在浏览器中，便于调试。

HTML

<script src="/dist/vue.js"></script>

Quiz Time👇

源码中对应的只有运行时版本和带编译版本的区别是什么？

✅ 带编译版本的入口文件中重写了实例的 mount 方法，其作用就是将模版转化为 render 函数，最后会调用 ../runtime/index中的mount 方法。

基于 vuecli 创建的项目是什么版本？

✅ 基于 vuecli 创建的项目是 es6 的模块化方式，且是运行时版本，项目中可以通过：>>> vue inpspect > output.js生成一个新文件来查看 webpack 配置。

分析重点

vue中的最重要的两个部分，一个是数据绑定，一个是组件化，这两个部分也将贯穿源码的分析过程。展开来说，一些非常关键的部分包括：

vue的静态成员和实例成员初始化过程
首次渲染的过程
数据响应式原理（这里是vue2）
组件创建与组件注册
...

在源码中，有一些重要的概念（术语），这些概念可以说是实现vue的基石，同时也不仅仅适用于vue的实现。包括：

响应式实现中涵盖的原理（发布订阅模式）
虚拟dom，diff过程
生命周期
...

注意事项

当我们深入到源码实现时，其实会接触到很多基础的知识点，因此在掌握实现的过程中也可以夯实基础，查漏补缺；
需要多多debug进行分析，源码中example文件夹中提供了一些示例；
掌握一些源码阅读的技巧，提升效率。多关注核心内容，记录自己的思考（用自己的话阐述原理，并不断修正），快捷键跳转等等。
最后也是非常重要的一点，需要对vue的应用掌握到一定程度，再来探究源码实现，否则有点纸上谈兵了。

准备工作 ​

前置准备 ​

源码目录文件 ​

构建版本类型 ​