Vue使用了一个虚拟DOM的实现,通过树状结构的JavaScript对象来构建虚拟DOM。再将构建的虚拟DOM应用到浏览器的真实DOM上。这尽可能避免了DOM操作,提高了性能。
render函数中所用的方法是createElement,别名h,这个h来源于使用JavaScript描述HTML的技术-HyperScript
createElement方法接受三个参数:
- 第一个参数是元素的类型,可以是一个标签名,比如div,可以是一个组件名,也可以是组件定义对象。
- 第二个参数可选,是一个定义了属性(class,style等),prop,事件监听等的数据对象。
- 第三个参数也是可选,可以是纯文本,也可以是通过createElement创建的元素数组。
示例:
1 2 3 4 5 6 | render(h){ return h('ul',{'class':'students'},[ h('li',{'class':'student'},'bob'), h('li',{'class':'student'},'rose'), ]) } |
上面代码将在浏览器中渲染成:
1 2 3 4 | <ul class="students"> <li class="student">bob</li> <li class="student">rose</li> </ul> |