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

一、目的

     前端技术的发展，现在以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更新)