浅谈Vue中的render函数

render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。

render也可以称为渲染函数

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

完整的render函数

render:function(createElement) {

return createElement('标签名称',{标签上的属性},子节点(包含内容))

}

当使用render函数描述虚拟 DOM 时，vue 提供一个函数，这个函数是就构建虚拟 DOM 所需要的工具。官网上给他起了个名字叫 createElement。还有约定的简写叫 h，将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的

createElement 参数

createElement（TagName，Option，Content）接受三个参数
createElement(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])

官方文档

// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签名、组件选项对象，或者
// resolve 了上述任何一种的一个 async 函数。必填项。
'div',

// {Object}
// 一个与模板中属性对应的数据对象。可选。
{
},

// {String | Array}
// 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
// 也可以使用字符串来生成“文本虚拟节点”。可选。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)

例子:

render:(h) => {
  return h('div',{
　　　//给div绑定value属性
     props: {
         value:''
     },
　　　//给div绑定样式
　　　style:{
　　　　　width:'30px'
　　　},　
　　　//给div绑定点击事件　　
     on: {
         click: () => {
            console.log('点击事件')
         }
     },
  })
}

例子:

<script>
export default {
  name: 'Rende',
  data() {
    return {
      list:['战三','李四','王五']
    }
  },
   render(h) {
     return h('ul', {}, this.list.map(name => h('li', { attrs: { class:'test' } },`${name}`)))
   }
};
</script>