render函数基础

Vue 推荐在绝大多数情况下使用 template 来创建 HTML。然而在一些场景中，确实是需要 JavaScript 的完全编程的能力，这时可以用 render 函数，它比 template 更接近编译器，且优先级比 template高。

对于一个普通的 html 元素会传递给我们哪些信息，可以得到3部分有效信息：
<h1 class='foo'>hello world</h1>

1. 这个元素的标签名–h1
2. 这个元素有什么属性/事件，class,style,onclick,name,id…
3. 这个元素有什么子元素，这里是一个文本节点 ‘hello world’

render函数和模板字符串是描述虚拟DOM树的两种方式,那么用createElement函数来描述就变成了下面这样：

craeteElement('h1', {class,style,on,attrs:{name,id}, 'hello world'}) 
//这里，第三个参数还有玄机，接收的参数十分灵活，详情参考官网关于这三个参数的描述

createElement() 有3个参数：

• 参数一
  require: true
  type: {String | Object | Function}
  meaning: {一个 HTML 标签字符串 | 组件选项对象 | 一个返回值类型为String/Object的函数}

如：

'div'  //字符串 
{ 
    data:{}, 
    methods:{}, 
    mounted:{} 
}   //一个组件选项对象
function(){return 'div'}    //返回上面两种

• 参数二
  require: false
  type: { Object }
  meaning: {一个包含模板相关属性的数据对象}， 一个数据对象，包括对根元素html属性的描述，和组件属性的描述

如：<man class="color" height="1.4m" weight="50kg" @move="handle" />

需要传入的第二个参数应该是

{ 
    'class':{
        color:true
    }, 
    props:{
        // 组件 props
        height:'1.4m', 
        weight:'50kg'
    }， 
    on:{
         // 事件监听器基于on
        move:function handle(){}
    }
 }

• 参数三
  require: false
  type: { String | Array }
  meaning: { 子节点(VNodes)，由createElement()生成，或简单的使用字符串来生成”文本节点”}

总之，如同:

props: ["comName", "shrink"],

render(h) {
    return h(this.comName, {
        props: {
            shrink: this.shrink
        }
    });
},