Vue2.x中渲染功能的详细说明

Render函数是vue 2 . x版本中的一个新函数；使用虚拟dom渲染节点可以提高性能，因为它是基于JavaScript计算的。使用createElement(h)创建dom节点。CreateElement是渲染的核心方法。当它的Vue被编译时，它会将模板中的节点解析成虚拟dom；

什么是虚拟dom？

虚拟dom不同于真实dom，它是一个JavaScript对象。当状态改变时，虚拟dom会做出不同的判断/操作；然后确定需要替换哪个dom而不是完全重绘，这样性能会比dom操作高很多。

我们来看一张Aresn总结的图片：

vue版本2.x中的VNode属性：

标记：当前节点的标记名，

数据：当前节点的数据对象，

子节点：子节点数组，

文本，文本当前节点，

Elm:当前虚拟节点对应的真实dom节点，

Ns:节点的命名空间，

内容：编译范围，

功能上下文：功能组件的范围，即全局上下文。

关键：节点识别，有利于补丁优化。

组件选项：创建组件实例时的选项。

子级：对应于当前节点的组件实例。

父节点：组件的占位符节点。

原始：原始html，

无论它是静态节点，

IsRootInsert:是否作为后续节点插入；如果它是由转换包装的节点，属性值为false。

IsComment:无论是评论节点，

IsCloned:无论是克隆节点，

IsOnce:是只改变(渲染)一次，还是有v-once命令；

其中有几种虚拟节点类型：

上帝阿伦森总结得很好：

文本节点，

元素节点：公共元素节点，

组件节点：组件节点，

EmptyVNode:空节点或没有内容的注释节点。

克隆节点：克隆节点，可以是上述任何节点

说了这么多；什么时候用虚拟dom比较好？事实上，我们使用的单文件组件已经足够好了。但是有些代码冗余的时候，如果写单个文件组件，会有很多重复的内容；

然后介绍其核心功能；

createElement:

CreateElement接收3个参数：

第一个参数可以是HTML标记名，可以是组件，也可以是函数；此参数是必需的；

第二个是数据对象(可选)；

第三个是子节点(可选)。

附上一个非常简单的createElement函数演示；

Varapp=newvue ({el:' # app '，render : create element={ eturn create element(' H2 '，[createelement ('a '，{ domprops 3360 { href 3360 ' # Biao ti ' } }，' title '))))))；} });这只是createElement函数的使用，以及Vue2中的VNodeData

类别：v-bind/:类别

style:v-bind/:style

属性，如id

道具：道具，

:自定义事件等。

本机：本机事件

这些也可以在渲染函数中实现。如果虚拟节点是组件或包含组件的插槽，则虚拟节点必须是唯一的。

像正常的开发过程一样，单个文件组件中的模板更简单，可读性更强。如果由webpack打包，模板也将被预编译为呈现函数。

这里，演示栗子还没写这么多。这只是一个简单的介绍。如果有更好的，欢迎大家一起研究讨论。