Vue.js render方法使用詳解

前注：

版本限制：

Vue.js 2.0+ 
1.0無法使用

沒耐心，只關心有什麼用的，想知道其大概是獲取什麼東西后生成的，可以直接看結尾的總結

非使用render方法的情況

完整程式碼：

程式碼說明：

• 最下面的new Vue方法很明顯，是new了一個Vue的例項，掛載點是”#app”這個dom
• Vue.component這部分程式碼，第一個參數列示註冊了一個Vue的元件，標籤名是child（即 <child> 標籤會被替換）；
• 第二個引數中，template屬性表示取找id=“template”的標籤（另注，這個標籤是script，或者是div，或者是template，或者是其他，沒有影響），然後將這個標籤作為元件的模板
• props表示傳遞給這個元件的變數，通過標籤中的v-bind:level這種形式傳遞變數level的值等於1。在這裡的寫法是限制變數型別為number，並且強制需要
• slot表示內容分發，具體來說，就是把元件替換的源html標籤裡的內容（如 <child> 標籤裡面的內容，不包含 <child> 標籤本身，這裡是Hello world!），發在 <slot> 標籤所在的位置（即放在 <h1>``````<h2> 這樣的標籤內）。
• 如果還不理解，可以執行該段程式碼檢視結果，或者去看vue的官方文件說明
• 總的來說，順序如下：註冊一個元件，這個元件有模板，這個模板裡有一個變數，變數的值通過父元件來傳遞，然後根據變數的值，通過v-if命令顯示對應的html標籤內容，然後在父元件裡使用這個元件，讓子元件顯示需要顯示的內容。

這樣的程式碼有一個缺陷，就是需要寫大量重複的程式碼，如從 <h1> ～ <h6> 共6種情況。如果這樣的模板比較複雜，比如 <hx> 標籤裡還有很多其他內容，顯然會讓人十分困擾，既不美觀也不好用。

使用render方法的情況

解決辦法就是render方法，全部程式碼如下：

程式碼說明：

1、這裡的程式碼和上面區別之處有兩點：

其一，沒有顯式的模板內容，而是通過render方法生成； 
其二，使用了createElement方法

2、關於createElement方法，他是通過render函式的引數傳遞進來的，這個方法有三個引數，

第一個引數主要用於提供dom的html內容，型別可以是字串、物件或函式。比如”div”就是建立一個 <div>標籤

第二個引數（型別是物件）主要用於設定這個dom的一些樣式、屬性、傳的元件的引數、繫結事件之類，具體可以參考 官方文件 裡這一小節的說明

第三個引數（型別是陣列，陣列元素型別是VNode）主要用於說是該結點下有其他結點的話，就放在這裡。

比如說，有需要分發的標籤 <slot>，則通過 this.$slots.default 來獲得，或許還有其他元件之類，可能需要被使用的，應該也是放在這裡。

個人初步理解是，在原本被替換的地方，例如例上面程式碼中的 <child> 標籤，在其下的每個次一級標籤為一個元素，放在 this.$slots.default這個陣列中，例如上面的話，這個陣列只有一個元素，但是以下程式碼：

<child v-bind:level="2"><div>Hello</div><div> world!</div></child>

這個陣列中則有兩個元素，分別是 <div>Hello</div> 和 <div> world!</div>，例如 this.$slots.default[0] 則表示第一個標籤。

另外，假如這2個元素中間有空格、換行符之類，那麼陣列中則有三個元素，那個空格、換行符則為第二個元素。這個屬性有點類似dom的 childNodes屬性，不是單純以標籤才算作子節點的。（但注意，不是完全相同）

有時候，我們可能想在裡面新增其他的元件，例如將abc元件註冊在裡面。那麼，我們首先要註冊這個abc元件，然後將abc元件在陣列裡通過createElement來建立標籤，只有通過這樣的方式建立的abc標籤，才能被abc元件使用。單純輸入字串 "<abc></abc>" 這樣是不可以的。

如以下程式碼是可行的：（在通過render方法生成的模板中新增別的元件）

顯示結果是：

Hello
abc
world!

最後，如果想將原有內容全部使用（而不是隻取部分標籤），那麼直接使用 this.$slots.default 作為第三個引數即可，他本身就是一個陣列。

3、總而言之，createElement方法的作用就是動態的建立一個dom用於被render函式渲染，其中引數二和引數三可以選擇性省略，引數二用於設定dom的樣式、屬性、事件等，引數三用於設定分發的內容，包括新增的其他元件。

粗略理解的話，可以理解為：createElement( 標籤名, 標籤屬性, 標籤裡的內容)

這樣的話，我們就有了一個元件的模板所需要的全部內容了

總結

1、render方法的實質就是生成template模板；

2、通過呼叫一個方法來生成，而這個方法是通過render方法的引數傳遞給他的;

3、這個方法有三個引數，分別提供標籤名，標籤相關屬性，標籤內部的html內容

4、通過這三個引數，可以生活曾一個完整的模板。

備註：

1、render方法可以使用JSX語法，但需要Babel plugin外掛；

2、render方法裡的第三個引數可以使用函式來生成多個元件（特別是如果他們相同的話），只要生成結果是一個陣列，且陣列元素都是VNode即可