Vue 的 render 渲染

API
vue2 的 vnode

tag: 当前节点的标签名
data: 当前节点是数据对象
children: 子节点，数组也是vnode 类型
text: 当前节点的文本，一般文本节点或注释节点会有该属性
elm: 当前虚拟节点对应的真实的DOM节点
ns: 节点的namespace
content :编译作用域
functionalContext 函数话组件作用域
key: 节点的key属性，用于作为节点的标识，利于patch 的优化
componentOPtions: 创建组件实例会用到的选项信息
child: 当前节点对应的组件实例
parent:组件的站位节点
raw: 原始的html
isStatic : 静态节点标识
isRootInsert: 是否作为根节点插入，被<transtion>包裹的节点，该属性的值为false
isComment: 当前的节点是否是注释节点
isCloned: 当前的节点是否是克隆节点
isOne: 当前节点是否有v-once 指令

vNode
TextVNode 文本节点
ElementVNode 普通元素节点
ComponentVnode 组件节点
EmptyVNode：组件节点
CloneVNode 克隆节点，可以是任意类型的节点，唯一的区别是isCloned 的属性为TRUE

解决的场景

代码的冗长
template 中的大部分是重复的
外层的中必须包含无用的div

createElement用法（h）
eg: creteElement(
'div',
// {object}
// 一个对应属性的数据对象，可选可以在template中使用
{},
// {string |atrray}
// 子节点{VNode}，可选
[
createElement('h1', 'hello world'),
createElement('mycomponent', {
props:{
someProp: 'foo'
}
}),

)
第一个：一个参数必选，可以是一个html 标签，也可是一个组件或者是一个函数{string | object | Function} 必须return 上述其中的一个
第二个：可选参数数据对象
vueNodeData
key? :string | number
slot? string;
scopedSlots?:{[key: string]: scopedSlot},
ref?:String;
tag?:string;
staticClass?:string;
class?:any;
staticStyle?{[key:string]: any}

    style: Object[] | object
    props? {[key:string]: any}
    attrs?: {[key:string]: any}//HTML 属性
    domProps?:{[key:string]: any}
    hook?:{[key:string]: Function}
    on?:{[key:string]: Function | Function[]} // 自定义事件
    nativeOn?: {[key:string]: Function | Function[]} // 原生事件
    transition?:Object
    show?: boolean
    inlineTemplate?:{
        render: Function;
        staaticRenderFns: Function[];
    }
    directives?: VNodeDirective[];
    keepAlive?: boolean;

第三个：是子节点，也是可选用法一至

约束
所有组件树中，如果VNODE是组件，或含有组件的slot，那VNode 必须唯一

1、错误的用法，以为子组件重复了
<script>

var Child = {
render: function(createElement) {
return createElement('p', 'text');
}
Vue.component('ele',{
render: function(createElement) {
// 使用child 创建一个子节点
var ChildNode = createElement(child);
return createElement('div',[
ChildNode,
ChildNode
])
}
})
}
</script>

2、因为slot包含了组件并且重复了
<div id="app">
<ele>
<div>
<child></child>
</div>
</ele>
</div>
<script>
Vue.component('Child', {
render: function (createElement) {
return createElement('p', 'text');
}
})
Vue.component('ele', {
render : function(createElement) {
return creteElement('div', [
this.$slots.default,
this.$slots.default,

            ])
    }
})
</script>

3、slot 的克隆
<script>

var Child = {
render: function(createElement) {
return createElement('p', 'text');
}
Vue.component('ele',{
render: function(createElement) {
// 克隆slot 节点的方法
function cloneVMode (vnode) {
// 递归
}

    // 使用child 创建一个子节点
        var ChildNode = createElement(child);



        return createElement('div',[
            VNodes,
            clonedVNodes
        ])
    }
})

}
</script>

使用JavaScript 代替模板的功能

在render 中没有指令一切都可以用js 来实现。

slot的默认内容
// this.$slots.default 等于undefined
说明组件中没有定义的slot 这是就可以自定义内容

函数化组件
vue.js 提供了一个functional 的布尔值选项，设置为TRUE可以使组件无状态和无实例，也就是无data 和this上下文。这样用render函数返回
虚拟几点合一变得更加容易渲染，因为函数话组件只是一个函数，渲染开销要小的很多
使用函数话组件的时候render 提供了第二个参数来提供临时上下文

适用场景
1、程序化地在多个组件中选择一个
2、在将children props data 传递给子组件之前操作他们