render函数

官网文档：https://cn.vuejs.org/v2/guide/render-function.html

render函数的实质就是生成template模板；

通过调用一个方法来生成，而这个方法是通过render方法的参数传递给它的；

这个方法有三个参数，分别提供标签名，标签相关属性，标签内部的HTML内容

通过这三个参数，可以生成一个完整的模板

• render:h => h(APP)的详细解释

基本内容

render:function(createElement){
    return createElement(App);
}

进一步缩写（ES6语法）：

render(createElement){
    return createElement(App);
}

进一步缩写

render(h){
    return h(App);
}

按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);

createElement函数是用来生成HTML DOM元素的，也就是Hyperscript，因此才把createElement简写成h

Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

• Virtual DOM 与 Vue 2 的 Render 函数介绍

1、什么是Virtual DOM ？

DOM是文档对象模型（Document Object Model)简写，在浏览器中我们可以通过js操作DOM，但是这样操作性能很差，于是才出现Virtual Dom。Virtual Dom就是js中模拟DOM对象树来优化Dom操作的一种技术和思路。

React 和 Vue 2 都使用了 Virtual Dom 技术，Virtual Dom 并不是真正意义上的 DOM，而是一个轻量级的 JavaScript 对象，在状态发生变化时，Virtual Dom 会进行 Diff 运算，来更新只需要被替换的 DOM，而不是全部重绘。与 DOM 操作相比，Virtual Dom 是基于 JavaScript 计算，所以开销会小很多。

Virtual Dom运行过程如下图：

2、VNode对象 ？

    一个VNode实例对象包含以下属性

• tag:当前节点的标签名
• data: 当前节点的数据对象，具体包含哪些字段可以参考vue源码types/vnode.d.ts中对VNodeData的定义

• children: 数组类型，包含了当前节点的子节点，也是VNode类型。
• text: 当前节点的文本，一般文本节点或注释节点会有该属性
• elm: 当前虚拟节点对应的真实的dom节点
• ns: 节点的namespace
• context: 编译作用域
• functionalContext: 函数化组件的作用域
• key: 节点的key属性，用于作为节点的标识，有利于patch的优化
• componentOptions: 创建组件实例时会用到的选项信息
• child: 当前节点对应的组件实例
• parent: 组件的占位节点
• raw: raw html
• isStatic: 静态节点的标识
• isRootInsert: 是否作为根节点插入，被<transition>包裹的节点，该属性的值为false
• isComment: 当前节点是否是注释节点
• isCloned: 当前节点是否为克隆节点
• isOnce: 当前节点是否有v-once指令

3、VNode分类 ？

VNode可以理解为vue框架的虚拟dom的基类，通过new实例化的VNode大致可以分为几类：

• EmptyVNode: 没有内容的注释节点
• TextVNode: 文本节点
• ElementVNode: 普通元素节点
• ComponentVNode: 组件节点
• CloneVNode: 克隆节点，可以是以上任意类型的节点，唯一的区别在于isCloned属性为true

 

• Render 函数使用场景

　1、render函数是什么？

简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM。

因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,

vm中有一个方法_c,也是这个函数的别名

 

2、render函数怎么用？

 

• createElement 用法

createElement构成了一个Vue Virtual Dom的模板，他有三个参数：

第一个参数必选，可以是一个html标签，也可以是一个组件或者函数。（String | Object | Function）

第二个是可选参数，数据对象，再template中使用。{Object}

第三个是子节点，也是可选参数，用法一致。{String | Array}

对于第二个参数“数据对象”，具体如下：

以往在template里,我们都是在组件的标签上使用v-bind:class,v-bind:style,v-on:click这样的指令，在render函数都将其写在子数据对象里，

注意：如果VNode是组件或者含有组件的slot，那么VNode必须唯一。

 

• 函数化组件及实战

 

Vue.js提供一个functional的布尔值选项，设置true可以是组件无状态和无实例，也就是没有data和this上下文。

 

• JSX

 

 

• 实战：用 Render 函数开发一个可排序的表格组件

 

 

• Q & A