render總結

vue渲染組件的順序是:

執行render函數-->沒有render參數解析template參數內容-->沒有template參數將el內html當作template解析

其中解析template實質上是轉換爲render函數。

語法:

render: (createElement)=>{

　　return createElement(...)

}

備註: 此createElement非原生js方法中的createElement

難點和精髓在於傳入的createElement函數

createElement語義上應該建立真實的dom元素，但實際上其真實的名稱應該是createNodeDescription(建立節點說明)，包含此節點的子節點及如何渲染等信息，

這裏注意兩點:

1.建立出的並不是真實node，而多稱之爲虛擬節點(visual node),或簡稱爲VNode，而虛擬dom(visual dom)是對由vNode組成的樹的簡稱。

2.節點有許多種，元素節點、文本節點、註釋節點（是的，註釋也是節點~）。。

 

createElement的三個參數

1. 當前建立對象{string|Object|function} 必選

html標籤字符串

Object組件選項對象

function函數返回前二者

 

2.數據對象{object}  可選

此VNode的屬性對象

 

3.子節點 {string|Array}  可選

若是是string，則相似於innerHTML，做爲文本節點嵌入

若是是array，數組元素能夠是字符串(文本節點)或由createElement建立的VNode

例如:

var vm= new Vue({
    render: h=> {
        return h('p', ['11', h('span', '333')])
    }
}).$mount('#a')

View Code