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 傳遞給子組件以前操做他們