Render函數

Vue2與Vue1最大的區分就在於Vue2運用了假造DOM來更新DOM節點，提拔襯着機能。

假造DOM

React和Vue2都運用了假造DOM手藝，假造DOM並非真正意義上的DOM，而是一個輕量級的JavaScript對象，在狀況發生變化時，假造DOM會舉行Different運算，來更新只須要被替代的DOM，而不是悉數重繪。

與DOM操縱比擬，假造DOM是基於JavaScript盤算的，所以開支會小許多。

在Vue2中，假造DOM就是經由過程一種VNode類表達，每一個DOM元素或組件對對應一個VNode對象。

VNodeData節點剖析：

• children 子節點，數組，也是VNode範例。
• text 當前節點的文本，平常文本節點或解釋節點會有該屬性。
• elm 當前假造節點對應的實在的DOM節點。
• ns 節點的namespace
• content 編譯作用域
• functionalContext 函數化組件的作用域
• key 節點的key屬性，用於作為節點的標識，有利於patch的優化
• componentOptions 建立組件實例時會用到的選項信息。
• child 當前節點對應的組件實例。
• parent 組件的佔位節點。
• raw 原始html
• isStatic 靜態節點的標識
• isRootInset 是不是作為根節點插進去，被<transition>包裹的節點，該屬性的值為false。
• isConment 當前節點是不是是解釋節點。
• isCloned 當前節點是不是為克隆節點。
• isOnce 當前節點是不是有v-once指令。

VNode重要能夠分為以下幾類：

• TextVNode 文本節點。
• ElementVNode 一般元素節點。
• ComponentVNode 組件節點。
• EmptyVNode 沒有內容的解釋節點。
• CloneVNode 克隆節點，能夠是以上恣意範例的節點，唯一的區分在於isCloned屬性為true。

Render函數經由過程createElement參數來建立假造DOM，構造精簡。个中，接見slot的用法，運用場景集合在Render函數。

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”wXozpg” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-render函數” class=”codepen”>See the Pen Vue-render函數 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

createElement用法

基礎參數

createElement構成了Vue假造DOM的模板，它有3個參數：

createElement(
    //{String | Object | Function}
    //一個HTML標籤，組件選項，或一個函數
    //必需return上面个中一個
    'div',
    //{Object}
    //一個對應屬性的數據對象，可選
    //能夠在template中運用
    //{String | Array}
    //子節點(VNode)，可選
    [
        createElement('h1','hello world'),
        createElement(MyComponent,{
            props:{
                someProp:'foo'
            }
        }),
        'bar'
    ]
);

第一個參數必選，能夠是一個HTML標籤，也能夠是一個組件或函數；第二個是可選參數，數據對象，在template中運用。第三個是子節點，也是可選參數，用法一向。

之前在template中都是在組件的標籤上運用v-bind:class、v-bind:style、v-on:click如許的指令，在Render函數都將其寫在了數據對象中。

束縛

一切的組件樹中，假如VNode是組件或含有組件的slot，nameVNode必需唯一。

在Render函數里建立了一個cloneVNode的工場函數，經由過程遞歸將slot一切子節點都克隆了一份，並對VNode的癥結屬性也舉行複製。

運用JavaScript替代模板功用

在Render函數中，不再須要Vue內置的指令，比方v-if、v-for。不管要完成什麼功用，都能夠運用原生JavaScript。

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”eKgVgQ” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”render–v-for” class=”codepen”>See the Pen render–v-for by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

map()要領時疾速轉變數組構造，返回一個新數組。
map常和
filter、
sort等要領一同運用，它們返回的都是新數組。

Render函數里沒有與v-model對應的API，須要本身來完成邏輯。

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”BVpYdd” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-render-API” class=”codepen”>See the Pen Vue-render-API by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

v-model就是prop:value和event:input組合運用的一個語法糖，雖然在Render里寫起來比較複雜，然則能夠自在掌握，深切到更底層。

關於事宜修飾符和按鍵修飾符，基礎須要本身完成：

關於事宜修飾符.capture和.once，Vue供應了特別的前綴，能夠直接寫在on的設置里。

寫法以下：

on: {
    '!click': this.doThisInCapturingMode,
        '~keyup': this.doThisOnce,
        '~!mouseover': this.doThisOnceInCapturingMode
}

簡樸模仿談天發送內容的場景：

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”ZRLrPN” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-模仿談天發送內容” class=”codepen”>See the Pen Vue-模仿談天發送內容 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

在Render函數中會大批運用slot，在沒有運用slot時會顯現一個默許的內容，這部份須要本身完成。

this.$slots.default即是undefined，就申明父組件中沒有定義slot，這是能夠自定義顯現的內容。