Vue源码解读系列

--本文采自本人公众号【猴哥别瞎说】

源码结构目录

写在前面

源码解读的vue版本为：2.6.10。 标注有对应注释的源码地址：src.

文章细分章节，各自标题前面的字段含义以下：

[干] 干货，有内容。

[硬] 硬货，内容较多且不易消化。

文章细分

[干]构造函数与初始化

[硬]数据响应式

[干]数组的响应式处理

[干]异步更新队列

[硬]虚拟DOM的引入

[硬]patch算法

[硬]组件化机制

如何开启源码的阅读

想要阅读源码，可是从 github 上面拉下来代码以后，殊不知如何下手。我想这是不少人遇到的难题。

以 vue2.6.x 系列为例，当咱们 git pull 源码以后，打开文件结构，可能会一脸懵逼。这时候，咱们须要对源码的基本结构有一个大体的了解。

了解源码的基本结构

/vue
    /dist :生成最终文件存放的文件夹
    /example : 官方提供的案例代码
    /flow : flow类型声明文件
    /packages : 代码里用到的独立外部包文件
    /scripts : 打包脚本，配置等
    /src : 核心代码
        /compiler : 编译器
        /core  : 核心代码（通用代码）
        /platforms : 平台代码（特殊代码）
            /web  : 网页端代码
            /weex : 移动端代码
        /server ： 服务端相关
        /sfc : 单文件解释器
        /shared : 共享逻辑代码
    /test : 测试文件
复制代码

这些文件夹的含义，大体能够经过其名字就能够知道大体的做用。其中src下面的三个文件夹，将会是源码阅读的重点：compiler、core、platforms。

那么，下一个问题来了，咱们如何去阅读源码呢？整个项目的入口在哪里？

这个时候咱们须要看看 package.json 的指令。查看dev命令：

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

咱们看到了TARGET有一个指向：web-full-dev。其含义应该是web环境下的Dev模式。全局搜索整个关键字，发如今/scripts/config.js文件中有这样的描述：

// runtime-only build (Browser)
  'web-runtime-dev': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.js'),
    format: 'umd',
    env: 'development',
    banner
  }
复制代码

这个时候，经过解析resolve函数，咱们就能够发现入口文件在src/platforms/web/entry-runtime-with-compiler.js。

因而，找到入口了。

使用chrome浏览器的调试功能

下一步，咱们但愿可以在本地可以调试源码。这个时候，咱们须要作下面的步骤：

1.安装依赖：npm i

2.安装rollup : npm i -g rollup

3.修改package.json的dev脚本，添加sourcemap属性，让调试时候能够定位到源码

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

4.运行开发命令：npm run dev

5.编写一个最简单的html文件，引用建立的vue.js文件。

<script src="path/to/dist/vue.js"></script>
复制代码

6.使用chrome浏览器打开该文件。

7.接下来就能够在浏览器愉快地调试代码了。