不做祖国的韭菜

设计模式是软件设计中为了解决不同场景，不同问题而总结出来的解决方案，而作为前端工程师而言，我们往往会更加关注几种常用的设计模式。

这个系列能连载说实话也挺不容易的，最开始的目标是在每次读完源码之后能把对过程的思考以及对作者思路的猜测做些笔记，以达到能更深刻理解这个框架，更快定位问题的目的。然而随着过程的进行，慢慢发现源码中每个实现，每个细节都有很多值得思考的东西，也渐渐喜欢上了这种以博客形式分析记录的方式…

上一节对keep-alive组件的分析，是从我画的一个流程图开始的。如果不想回过头看上一节的内容，可以参考以下的简单总结。 和普通组件一致，当父在创建真实节点的过程中，遇到keep-alive的组件会进行组件的初始化和实例化。 实例化会执行挂载$mount的过程，这一步会执行k…

keep-alive的使用只需要在动态组件的最外层添加标签即可。 简单的结果如下，动态组件在child1,child2之间来回切换，当第二次切到child1时，child1保留着原来的数据状态，num = 5。 按照以往分析的经验，我们会从模板的解析开始说起，第一个疑问便是：内…

动态组件我相信大部分在开发的过程中都会用到，当我们需要在不同的组件之间进行状态切换时，动态组件可以很好的满足我们的需求，其中的核心是component标签和is属性的使用。 例子是一个动态组件的基本使用场景，当点击按钮时，视图根据this.chooseTabs值在组件child…

由于v-model和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对v-model的分析方式和以往大同小异。分析会围绕模板的编译，render函数的生成，到最后真实节点的挂载顺序执行。最终我们依然会得到一个结论，v-model无论什么使用场景，本质上都是一个语法糖。…

从根实例入手进行实例的挂载，如果有手写的render函数，则直接进入$mount挂载流程。 只有template模板则需要对模板进行解析，这里分为两个阶段，一个是将模板解析为AST树，另一个是根据不同平台生成执行代码，例如render函数。 $mount流程也分为两步，第一步是…

9.1. 模板编译 Vue在挂载实例前，有相当多的工作是进行模板的编译，将template模板进行编译，解析成AST树，再转换成render函数，而有了render函数后才会进入实例挂载过程。对于事件而言，我们经常使用v-on或者@在模板上绑定事件。因此对事件的第一步处理，就是…

之前讲到Vue在渲染机制的优化上，引入了Virtual DOM的概念，利用Virtual DOM描述一个真实的DOM,本质上是在JS和真实DOM之间架起了一层缓冲层。当我们通过大量的JS运算,并将最终结果反应到浏览器进行渲染时，Virtual DOM可以将多个改动合并成一个批量…