Vue.js源码学习笔记在线地址https://nlrx-w

Learn-Vue-Source-Code 1. 前言

博主作为一名前端开发，日常开发的技术栈是Vue，并且用Vue开发也有一年多了，对其用法也较为熟练了，但是对各种用法和各种api使用都是只知其然而不知其所以然，因此，有时候在排查bug的时候就会有点捉襟见肘。鉴于此，索性就从github上clone下来一份Vue源码来学习学习，本系列博文将用来记录博主对Vue源码的整个学习过程，以及自己对源码的一些理解。一方面开阔自己的知识视野，另一方面也希望这些文字能够带给他人些许帮助。

2. 整体规划 2.1 源码学习目录

Vue.js的源码目录如下：

├─dist # 项目构建后的文件 ├─scripts # 与项目构建相关的脚本和配置文件 ├─flow # flow的类型声明文件 ├─src # 项目源代码 | ├─complier # 与模板编译相关的代码 | ├─core # 通用的、与运行平台无关的运行时代码 | | ├─observe # 实现变化侦测的代码 | | ├─vdom # 实现virtual dom的代码 | | ├─instance # Vue.js实例的构造函数和原型方法 | | ├─global-api # 全局api的代码 | | └─components # 内置组件的代码 | ├─server # 与服务端渲染相关的代码 | ├─platforms # 特定运行平台的代码，如weex | ├─sfc # 单文件组件的解析代码 | └─shared # 项目公用的工具代码 └─test # 项目测试代码

从上面的目录结构可以看出，Vue的整个项目包含了类型检测相关、单元测试相关、与平台无关的核心代码以及跨平台运行的相关代码。

由于我们只是学习Vue.js的设计思想以及代码实现的相关逻辑，所以我们暂不去关心类型检测、单元测试以及特定平台运行等相关逻辑实现，仅关注它的核心代码，即src/core和src/complier这两个目录下的代码，并且接下来后续的学习也都是只在这两个目录的范围之内。

2.2 学习路线

在学习之前，我们需要先制定一个学习路线，循序渐进的学习，这样不至于一头雾水，无处下手。后面的学习路线如下：

变化侦测

学习Vue中如何实现数据的响应式系统，从而达到数据驱动视图。

虚拟DOM

学习什么是虚拟DOM，以及Vue中的DOM-Diff原理

模板编译

学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM

实例方法的实现

学习Vue中所有实例方法(即所有以$开头的方法)的实现原理

全局API的实现

学习Vue中所有全局API的实现原理

生命周期

学习Vue中组件的生命周期实现原理

指令的实现

学习Vue中所有指令的实现原理

过滤器的实现

学习Vue中所有过滤器的实现原理

2.3 学习输出

通过一步步的学习，博主打算在学习过程中输出以下三个东西：

以博客连载的形式记录学习过程，系列博文地址：https://www.cnblogs.com/wangjiachen666/category/1375966.html； 为clone下来的Vue源码添加尽可能详细的注释； 做一份思维导图，以宏观角度总览源码； 3. 那就开始吧

博主尽可能快的更新文章及输出资料，毕竟博主也是一个修(9)福(9)报(6)的程序猿。2333~~~