Vue中的Render渲染函数的写法和规范

VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数

参考网址：https://www.cnblogs.com/tugenhua0707/p/7528621.html

return createElement('h1', this.title);

createElement 参数

// @return {VNode}
createElement(
  // {String | Object | Function}
  // 一个HTML标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数。该参数是必须的
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象，这样我们可以在template中使用这些属性，该参数是可选的。
  {

  },

  // {String | Array}
  // 子节点（VNodes）由 createElement() 构建而成。可选参数
  // 或简单的使用字符串来生成的 "文本节点"。
  [
    'xxxx',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'xxx'
      }
    })
  ]
)

template 中有 v-if 和 v-for， 但是vue中的render函数没有提供专用的API。在render函数中会被javascript的 if/else 和map重新实现。

  
    
    
  
  
    

      
        Hello world!
      
    
  
  

  

render函数中没有 与 v-model相应的api，我们必须自己来实现相应的逻辑。

  
    
    
  
  
    

      
        Hello world!
      
    
  
  

  

查看elementUI中具体运用：

Message 可以接收一个字符串或一个虚拟DOM（VNode ） 作为参数，它会被显示为正文内容。