入口文件开始，分析Vue源码实现

Posted 2020-11-01 monkeyWang

Why?

网上现有的Vue源码解析文章一搜一大批，但是为什么我还要去做这样的事情呢？因为觉得纸上得来终觉浅，绝知此事要躬行。

然后平时的项目也主要是Vue，在使用Vue的过程中，也对其一些约定产生了一些疑问，可能官网上只会建议你这么做，但是核心实现我们可能并不知道。比如：

• v-for key 是如何达到“就地复用”策略
• 数组更新检测是如何完成的
• set 为什么就能动态添加根级别的响应式属性
• 为什么Vue可以跨平台支持weex，以及后来出现的mpvue
• ...

其次，很久没有更新内容了，之前对Vue源码也是有点研究，只不过没有很体系的记录，现在抽了点时间，做了一次基础的总结吧。一方面是因为想要克服自己的惰性，另一方面也是想重新温故一遍。

What？

一共分成了10个基础部分，后续还会继续记录。我们可以先看一下概览：

然后我们来看一下基础的目录：

入口开始，解读Vue源码（一）———— 造物创世

入口开始，解读Vue源码（二）—— new Vue 的故事

入口开始，解读Vue源码（三）—— initMixin 上篇

入口开始，解读Vue源码（三）—— initMixin 下篇

入口开始，解读Vue源码（四）—— 实现一个基础的 Vue 双向绑定

入口开始，解读Vue源码（五）—— $mount 内部实现

入口开始，解读Vue源码（六）—— $mount 内部实现 --- compile parse函数生成AST

入口开始，解读Vue源码（七）—— $mount 内部实现 --- compile optimize标记节点

入口开始，解读Vue源码（八）—— $mount 内部实现 --- compile generate 生成render函数

入口开始，解读Vue源码（九）—— $mount 内部实现 --- render函数 --> VNode

入口开始，解读Vue源码（十）—— $mount 内部实现 --- patch

End?

文章前后也是利用碎片时间总结整理而成，有些也是翻阅了很多的资料，也有过引用巨人的段落，文章中有所标注。如果没有标注，可能是本人忘记了，欢迎提醒。文章中如果有笔误或者不正确的解释，也欢迎批评指正，共同进步。

最后：

github地址

部分源码demo