一、目的
前端技术的发展,现在以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、结合实际开发过程中遇到的"坑",通过源码,分析其背后产生的原因。
好了,接下来下载源码版本,一起开启源码学习之旅。
附: