一、目的

前端技术的发展，现在以vue，react，angular为代表的MVVM模式以成为主流，这三个框架大有三分天下之势。react和angular有facebook与谷歌背书，而vue是以一己之力抗衡，说明了vue确有其精妙之处，主要体现在轻巧，高性能，组件化，容易上手等方面。

在实际项目中，只知道怎么用这些API，对一些原理性的东西一知半解，长此以往，如鲠在喉，所以决定学习源码。

1、了解实现的原理，能更好的指导实际项目开发，比如响应式原理，编译过程等等。

2、vue的源码简洁，架构清晰，本身就是一个很好的学习范例教材。

二、知识储备

在学习源码之前，需要有vue的实际的项目，对主要的API使用有基本的了解，这一点其实不难，因为vue本来就比较容易上手，没有项目经验的可以找些demo练练手。另外还需要了解ES6规范，flow语法，打包编译工具等等，静下心二三天也就搞定了，如果对这些还不熟悉的小伙伴，那就着手准备吧。

三、如何学习

每个人都有自己的学习方式，其中有人总结几个"dao"，我觉得挺好的，几个阶段：知道(学习)，做到(实践)，悟道（总结），传道（分享），我见过大部分同学都重视前两个阶段，而忽视后面两个。从我的经验看，后面两个可能更重要些，决定了你能否将知识固化，快速的提升自己。

那么在源码的学习过程中，我也尽量遵循这几个阶段，首先阅读源码，包括别人的总结和经验，此时应该能明白20%；再次自己实践，用一些demo去调试，去实践，大概能弄懂个50%；然后摈弃代码细节，抓住精华，抽象模型进行总结，包括画一些示意图，流程图等，在这个过程中会有一些意外的收获，做完这些应该能达到80%熟悉度；最后将自己的总结分享给大家，与大家一起学习探讨，这些总结肯定有很多瑕疵，甚至错误，依靠大家的力量来纠正，共同进步。

四、学习什么

vue源码所涉及到知识非常的全面，体系结构也比较复杂，好在我们是站在巨人的肩膀上，有大量的资料可以供我们参考，其中下面这张图(感谢原作者)很清晰的描述了vue的整个运行原理，我们的学习过程也将围绕这张图，梳理整个体系架构(源码版本为2.5.17)。

本文的一些特点，方便后续阅读：

1、通过真实实例运行，跟踪和解析源码流程。

2、抓住主干流程，忽略细节，通过流程图，示意图，类图等图解的方式呈现代码逻辑。

3、结合实际开发过程中遇到的"坑"，通过源码，分析其背后产生的原因。

好了，接下来下载源码版本，一起开启源码学习之旅。

附：

VUE源码学习第一篇--前言

VUE源码学习第二篇--准备工作

VUE源码学习第三篇--new Vue都干了啥(概述)

VUE源码学习第四篇--new Vue都干了啥（options合并）

VUE源码学习第五篇--new Vue都干了啥(初始化)

VUE源码学习第六篇--new Vue都干了啥(挂载)

VUE源码学习第七篇--编译(parse)

VUE源码学习第八篇--编译(optimize)

VUE源码学习第九篇--编译(generate)

VUE源码学习第十篇--响应式原理(观察者与发布器)

VUE源码学习第十一篇--响应式原理(订阅)

VUE源码学习第十二篇-patch(diff原理)

VUE源码学习第十三篇-patch(dom更新)

VUE源码学习第一篇--前言相关推荐

约2万字-Vue源码解读汇总篇(续更)
约2万字-Vue源码解读汇总篇(续更) 一.前言 1.系列汇总未完待续... Vue源码解读:06Vue3探索篇 Vue源码解读:05生命周期篇 Vue源码解读:04模板编译篇 Vue源码解读:03 ...
vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...
深入理解Tomcat和Jetty源码之第一篇前奏知识
深入理解Tomcat和Jetty源码之第一篇前奏知识这周开始对Tomcat和Jetty的源码和框架产生了浓厚的兴趣,接下来想记录一下学习Tomcat和Jetty源码的心得和体会,有兴趣的朋友可以关注 ...
Vue源码学习之Computed与Watcher原理
前言 computed与watch是我们在vue中常用的操作,computed是一个惰性求值观察者,具有缓存性,只有当依赖发生变化,第一次访问computed属性,才会计算新的值.而watch则是当 ...
Vue源码学习 - 准备工作
Vue源码学习 - 准备工作准备工作认识Flow 为什么用 Flow Flow 的工作方式类型推断类型注释数组类和对象 null Flow 在 Vue.js 源码中的应用 flow实践总 ...
Vue源码学习 - 组件化(三) 合并配置
Vue源码学习 - 组件化(三) 合并配置合并配置外部调用场景组件场景总结学习内容和文章内容来自黄轶老师黄轶老师的慕课网视频教程地址:<Vue.js2.0 源码揭秘>. 黄轶 ...
开源中国源码学习UI篇（一）之FragmentTabHost的使用分析
最近在有意读开源中国的源码来提升Android开发能力,开通博客来提升一下自己的积极性- -我参考的是开源中国2.2版,完整源码地址为http://git.oschina.net/oschina/an ...
开源中国源码学习UI篇（二）之NavigationDrawer+Fragment的使用分析
前文链接:开源中国源码学习UI篇(一)之FragmentTabHost的使用分析开源中国2.2版,完整源码地址为:http://git.oschina.net/oschina/android-app ...
Vue源码学习 - 组件化一 createComponent
Vue源码学习 - 组件化一 createComponent 组件化 createComponent 构造子类构造函数安装组件钩子函数实例化 VNode 总结学习内容和文章内容来自黄轶老师黄 ...