vue render

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: 是否做为根节点插入，被 包裹的节点，该属性的值为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 必须惟一

一、错误的用法，觉得子组件重复了

二、由于slot包含了组件 而且重复了

三、slot 的克隆

使用JavaScript 代替模板的功能

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

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

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

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