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

青旅半醒 2022-03-25 12:08 263阅读 0赞

# 一、目的 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70][]

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

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

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

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

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

附：

[VUE源码学习第一篇--前言][VUE_--]

[VUE源码学习第二篇--准备工作][VUE_-- 1]

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

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

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

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

[VUE源码学习第七篇--编译(parse)][VUE_--_parse]

[VUE源码学习第八篇--编译(optimize)][VUE_--_optimize]

[VUE源码学习第九篇--编译(generate)][VUE_--_generate]

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70]: /images/20220325/74811298b2394056acd106adb19a52de.png
[Link 1]: https://github.com/vuejs/vue
[VUE_--]: https://blog.csdn.net/tcy83/article/details/86566558
[VUE_-- 1]: https://blog.csdn.net/tcy83/article/details/84669827
[VUE_--new Vue]: https://blog.csdn.net/tcy83/article/details/86548070
[VUE_--new Vue_options]: https://blog.csdn.net/tcy83/article/details/84800979
[VUE_--new Vue 1]: https://blog.csdn.net/tcy83/article/details/85218316
[VUE_--new Vue 2]: https://blog.csdn.net/tcy83/article/details/86566589
[VUE_--_parse]: https://blog.csdn.net/tcy83/article/details/88383934
[VUE_--_optimize]: https://blog.csdn.net/tcy83/article/details/88880620
[VUE_--_generate]: https://blog.csdn.net/tcy83/article/details/89058191
[VUE_-- 2]: https://blog.csdn.net/tcy83/article/details/89597654
[VUE_-- 3]: https://blog.csdn.net/tcy83/article/details/90543287
[VUE_-patch_diff]: https://blog.csdn.net/tcy83/article/details/92735848
[VUE_-patch_dom]: https://blog.csdn.net/tcy83/article/details/94329331