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 必须唯一

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

2、因为slot包含了组件 并且重复了

3、slot 的克隆

使用JavaScript 代替模板的功能

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

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

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

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

转载于:https://www.cnblogs.com/iSAM2016/p/6789489.html