Vue2.x源码解析系列一：我的源码阅读心得

[lihongxun945]

我的源码阅读经历

我一直相信，只有看懂源码才能真正掌握一个框架，只停留在API文档层面的人永远成不了大牛。可能这也是大牛和菜鸟的一个最重要的区别。

个人最早的源码解析文章写于 2013年，是对jQuery的源码解析，那个时候好像 AngularJS 刚刚开始有人尝试，当然 Vue/React之类的是完全没听过的。文章地址：https://blog.csdn.net/lihongxun945/article/details/10304271

算是本人的处女作。后来陆陆续续写了一些其他系列的源码解析文章，主要是这两个：

• Vue1.0 源码解析系列 https://github.com/lihongxun945/myblog/labels/vue1.0%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90
• Webpack 源码解析系列 https://github.com/lihongxun945/diving-into-webpack

甚至在写 Vue1.0 源码解析的时候，还模仿它造一个类似的轮子。当然还有很多分析原理，以及笔记性质的博客，有兴趣可以在我的博客首页看看 https://github.com/lihongxun945/myblog

为什么要把这些都整理出来写成博客呢？一方面是希望能给前端新手们一些学习提高的素材，另一方面，写博客的过程其实是对知识的一次重新梳理和巩固，而且也方便自己以后回头查阅。也希望程序员界少一些 php是最好的语言或者30岁以后不适合写代码之类的浮躁，而多静下心来研究技术。

Vue2.x有什么新东西

我在写 Vue1.0源码解析的时候，其实 2.0 已经出了。当时就发现了很多变化，还在团队内部做过一个分享总结。Vue2.x的变化都写出来会很长，比如随便举几个例子：

• 增加了 VDOM
• 生命周期重做了，并且增加了一个 patch 阶段
• 父子组件的props 通信变成了单向的，子组件无法修改 父组件传递的 props
• 非原生DOM要监听原生事件需要加上 .native
• 去除了filters

但是除了VDOM之外，其实都是常规的更新，并没有颠覆之前的设计。从源码角度看，只有VDOM的引入对源码产生了很大的改变（当然还有flow的引入）。所以除了render之外，其实大部分内容跟Vue1.0的源码没有本质区别。不过我依然决定完全重写，而不是只增加一个 VDOM的章节，主要基于以下几点考虑：

• 源码重构之后有很大的不同，主要原因是由于增加了 VDOM, flow 以及 weex，使得源码结构发生了较大改变。
• 在1.0的源码解析中有一些我当时没太弄懂的点，或者是一些重要的点被忽略了，这一次将会写的更加详细一些。

这次直接以 v2.5.16源码为基础进行讲解，并不会一边讲一边造轮子，当然也不排除我后面会造一个 v2.x的轮子出来。

这次的目的依然是理解Vue2.x的实现原理,注意并不是弄懂每一行代码，我会把其中重要的几个大的功能都详细讲解，比如数据响应化，事件，模板渲染等，但我并不会把每一行代码都仔细的讲解，因为并没有这个必要。

我要阅读源码应该如何入手

并不推荐一个新手直接从源码开始，如果你想阅读一个比较复杂的框架的源码，并有很透彻的理解，比如 Vue源码，那么至少你需要满足如下几个条件：

• 前端基础知识扎实，JS基础扎实，flow，Rollup等要熟悉
• 有大型项目的架构能力，理解如何进行封装,解耦，复用，理解如何进行分层设计，知道大型项目如何处理依赖、组件通信等问题。
• 对Vue本身要很熟悉，有项目开发经验，写过插件等
• 可以先看一些别人的源码分析文章
• 有时间和耐心
  读源码并不是一个简单的工作，如果说jQuery源码的复杂度是1，那么我觉得Vue应该是10。有一个小技巧就是，在读源码的时候，自己创建一个项目，把不太理解的地方写出来，然后断点调试，可能会有意想不到的发现。

下一篇：vue2.x源码解析系列二: Vue组件初始化过程概要

[zhangqian199105]

持续