Vue.js 渲染函數， JSX(未掌握，未學完)

渲染函數 ， JSX(沒完成學習)

基礎：

實例屬性：vm.$slots

default 屬性包括了全部沒有被包含在具名插槽中的節點. 

渲染函數：

render: function(createElement) {

　return createElement('h1', xxxxxx)

}

 

案例：

<anchored-heading>中的Hello world!是文本節點，它被儲存在組件實例中的$slots.default：

在render中加上console.log(this.$slots.default)會獲得：

 

在render中加上console.log(this.$slots)會獲得：

 

徹底的代碼： 

 

節點、樹以及虛擬 DOM

HTML DOM節點樹中：每一個元素，每一個text，每一個註釋，都是節點。

 

Vue 經過創建一個虛擬 DOM 對真實 DOM 發生的變化保持追蹤。

createElement返回的是一個虛擬的DOM元素。一個createNodeDescription, 即爲建立真實DOM所需的信息。所以，建立的節點叫Virturl Node.  VNode。

 

createElement參數

具體參數須要看https://cn.vuejs.org/v2/guide/render-function.html

三部分：

• {String | Object | Function}  產生一個HTML標籤 
• {Object} 一個包含模版相關屬性的數據對象，用於在template中使用。
• {String | Array} 子節點VNodes, 由 `createElement()` 構建而成，或者是String產生的'文本節點'