浅谈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>

 效果:

 

 在vue-cli中main.js文件中

render: h => h(App),  这个是将App这个组件进行了编译