浅显易懂地介绍Vue2运行时渲染系统

当我们在使用Vue2的响应式来操作DOM时，不禁会想到 Vue2 的响应式系统是如此强大和方便，它可以让我们通过修改数据对象的属性，自动更新视图，而不必手动操作 DOM。其声明式的架构不仅保留了声明式的可维护性、还保留了一个较好的性能、对我们的心智负担也是相当友好的。要想实现这样一个强大的框架，必然就要有一个优秀的DOM渲染系统，这就是我们今天要介绍的主题。

运行时

在 Vue2 中，运行时通常指Vue2 应用程序会根据组件的配置信息和用户传入的数据动态生成虚拟 DOM，并通过一定的算法将其转换为真实 DOM 并渲染到页面中。我们这里要讨论的就是运行时的vue2渲染系统。

核心函数

在我们窥探渲染系统的全貌时，我们需要了解其四个函数

Vue2 的渲染系统的核心函数是 render()、h()、updateComponent() 和 patch()。

h函数

这是vue2中createElement函数的别名。

h()主要用于创建虚拟DOM，它是一个工具函数，也就是用于创建虚拟DOM的工具。

它接收三个参数：

一、标签名tagName

二、一个用于描述属性的对象

三、子节点。 可以是文本节点，也可以是h函数创造的节点

//一个简单的h函数示例
h("