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更新)

发布了33 篇原创文章 · 获赞 95 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/tcy83/article/details/86566558