render总结

vue渲染组件的顺序是:

执行render函数-->没有render参数解析template参数内容-->没有template参数将el内html当作template解析

其中解析template实质上是转换为render函数。

语法:

render: (createElement)=>{

　　return createElement(...)

}

备注: 此createElement非原生js方法中的createElement

难点和精髓在于传入的createElement函数

createElement语义上应该建立真实的dom元素，但实际上其真实的名称应该是createNodeDescription(建立节点说明)，包含此节点的子节点及如何渲染等信息，

这里注意两点:

1.建立出的并不是真实node，而多称之为虚拟节点(visual node),或简称为VNode，而虚拟dom(visual dom)是对由vNode组成的树的简称。

2.节点有许多种，元素节点、文本节点、注释节点（是的，注释也是节点~）。。

 

createElement的三个参数

1. 当前建立对象{string|Object|function} 必选

html标签字符串

Object组件选项对象

function函数返回前二者

 

2.数据对象{object}  可选

此VNode的属性对象

 

3.子节点 {string|Array}  可选

若是是string，则相似于innerHTML，做为文本节点嵌入

若是是array，数组元素能够是字符串(文本节点)或由createElement建立的VNode

例如:

var vm= new Vue({
    render: h=> {
        return h('p', ['11', h('span', '333')])
    }
}).$mount('#a')

View Code