![version](https://img.shields.io/badge/version-v1.0.0-orange"){kind=icon}
博主作为一名前端开发，日常开发的技术栈是Vue，并且用Vue开发也有一年多了，对其用法也较为熟练了，但是对各种用法和各种api使用都是只知其然而不知其所以然，因此，有时候在排查bug的时候就会有点捉襟见肘。鉴于此，索性就从github上clone下来一份Vue源码来学习学习，本系列博文将用来记录博主对Vue源码的整个学习过程，以及自己对源码的一些理解。一方面开阔自己的知识视野，另一方面也希望这些文字能够带给他人些许帮助。
本项目所分析的Vue.js源码版本是目前最新的版本，版本号为 v2.6.11 ，其代码目录如下：
├─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这两个目录下的代码，并且接下来后续的学习也都是只在这两个目录的范围之内。
在学习之前，我们需要先制定一个学习路线，循序渐进的学习，这样不至于一头雾水，无处下手。后面的学习路线如下：
-
变化侦测篇
学习
Vue中如何实现数据的响应式系统，从而达到数据驱动视图。 -
虚拟DOM篇
学习什么是虚拟DOM，以及
Vue中的DOM-Diff原理 -
模板编译篇
学习
Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM -
实例方法篇
学习
Vue中所有实例方法(即所有以$开头的方法)的实现原理 -
全局API篇
学习
Vue中所有全局API的实现原理 -
生命周期篇
学习
Vue中组件的生命周期实现原理 -
指令篇
学习
Vue中所有指令的实现原理 -
过滤器篇
学习
Vue中所有过滤器的实现原理 -
内置组件篇
学习
Vue中所有内置组件的实现原理
通过一步步的学习，博主打算在学习过程中输出以下三个东西：
- 以文字形式记录学习过程，在线阅读地址：https://nlrx-wjc.github.io/Learn-Vue-Source-Code/
- 为
clone下来的Vue源码添加尽可能详细的注释； - 做一份思维导图，以宏观角度总览源码；
江山父老能容我，不使人间造孽钱。您的赞赏，是对我写作最大的认可和鼓励。
点击收起/打开赞赏名单
| 昵称 | 赞赏时间 | 赞赏方式 | 赞赏金额 | 备注 |
|---|---|---|---|---|
| *心 | 2019-11-29 | 支付宝 | ￥10.00 | - |
| 默默 | 2019-12-13 | 微信 | ￥88.88 | - |
| 2*$ | 2019-12-20 | 微信 | ￥10.00 | - |
| *俊 | 2019-12-21 | 微信 | ￥ 5.00 | - |
| *延森 | 2019-12-26 | 支付宝 | ￥66.66 | - |
| A*y | 2019-12-26 | 微信 | ￥20.00 | 感谢博主 |
| S*n | 2019-12-27 | 微信 | ￥6.00 | - |
| *理 | 2019-12-27 | 微信 | ￥6.60 | 感谢 |
| N*N | 2019-12-27 | 微信 | ￥10.00 | - |
| D*o | 2019-12-27 | 微信 | ￥6.66 | 阅读前 |
| 4*7 | 2019-12-28 | 微信 | ￥6.66 | 感谢！ |
| *海涛 | 2019-12-30 | 支付宝 | ￥5.00 | 文章的赞赏，看了您的源码解读很受启发，感谢 |
| 小唐小唐兜里有糖 | 2020-01-02 | 微信 | ￥6.66 | - |
| *k | 2020-01-02 | 微信 | ￥6.66 | - |
| H*g | 2020-01-06 | 微信 | ￥10.00 | - |
| *航 | 2020-01-15 | 微信 | ￥10.00 | 阅读前首先给个赞赏 |
| 神三元 | 2020-01-19 | 微信 | ￥10.00 | 感谢难凉兄的源码文章 |
| **宇 | 2020-01-21 | 支付宝 | ￥5.00 | - |
| *文 | 2020-02-04 | 微信 | ￥16.00 | 写的不错 |
| *雄 | 2020-02-04 | 微信 | ￥10.00 | - |
| a*x | 2020-02-15 | 微信 | ￥1.00 | 加油 |
感谢以上朋友，十分感谢！！！ 🙏 🙏 🙏
好多读者推荐我建一个读者交流群，一来可以交流心得，二来可以将文中的一些阅读意见及时反馈，最重要的是还可以聊天吹水，那就建一个吧。
由于群聊人数大于100就不能扫码加入了，大家想进群的话就添加下面这个微信机器人。
切记添加好友的时候备注‘vue’，不然的话不能触发好友请求处理操作！
切记添加好友的时候备注‘vue’，不然的话不能触发好友请求处理操作！
切记添加好友的时候备注‘vue’，不然的话不能触发好友请求处理操作！
好友添加成功后会自动向你发送入群邀请链接。
写作是一件十分枯燥的事情，如果我写的这些文字对你有些许帮助的话，还请赏个star哈~~