1、了解Render函數(shù)

????????Render函數(shù)是Vue2.x新增的一個函數(shù)、主要用來提升節(jié)點的性能，它是基于JavaScript計算的，使用Render函數(shù)將template里面的節(jié)點解析成虛擬的DOM。

????????Vue推薦在絕大多數(shù)情況下使用模板來創(chuàng)建HTML，然而在一些場景中，真的需要JavaScript的運用即可使用渲染函數(shù)Render函數(shù)，比模板更接近編譯器。

????????簡而言之: 在 Vue 中使用模板 HTML 語法組建頁面，使用 Render 函數(shù)是為了使用 Js 語言來構(gòu)建 DOM。

2、Render函數(shù)的核心原理

? ? ? ? ?Vue框架的核心是虛擬DOM，編譯template模板時要轉(zhuǎn)譯成VNode的函數(shù)，當用render函數(shù)構(gòu)建DOM時，Vue就免去了轉(zhuǎn)譯的步驟。

3、Render函數(shù)

? ? ? ? ?可以將一個函數(shù)傳遞給Vue 實例選項對象中render屬性, 該函數(shù)會接受一個creatElement函數(shù),可以使用它指定需要在頁面上顯示的內(nèi)容,createElment 就是一個用來創(chuàng)建虛擬DOM(VNode)的函數(shù)

render函數(shù)是要有接收參數(shù)的

? ??1、第一個參數(shù)為必填項，類型可以是Function(createElement).

? ??2、render的返回值是VNode（虛擬節(jié)點），類型可以是 String、Array。

2、createElement的用法

createElement函數(shù)接收三個參數(shù)

? ???1.? 第一個參數(shù)：是生成在頁面上顯示的標簽元素（必需參數(shù)）。

? ???2.? 第二個參數(shù)：是包含配置信息的數(shù)據(jù)對象（如HTML特性，屬性，事件偵聽器以及要綁定的class和style）。

? ???3.? 第三個參數(shù)：是一個子節(jié)點字符串或者包含子節(jié)點的數(shù)組。

示例：

代碼

1.? 第一個參數(shù) { String | Object | Function }

? ? ? ?第一個參數(shù)是一個必須的參數(shù)，這個參數(shù)可以是字符串string、對象object、或者一個函數(shù)function。

? ? ? ?未使用render函數(shù)創(chuàng)建H1標簽的寫法：

index.html

? ? ? ? ?使用render函數(shù)創(chuàng)建H1標簽的寫法：

??????????1、字符串：（第一個參數(shù)可以是標簽名的字符串）

代碼

? ? ? ? ? ? ? ?給createElement傳入了一個字符串參數(shù) h1 ，我們就會發(fā)現(xiàn)頁面上 h1 標簽被渲染出來了

? ? ? ? ? ? ? ?2. 對象：（參數(shù)除了是字符串以外，可以是組件的選項對象）

代碼

? ? ? ? ? ? ? ? ? ? 結(jié)果我們會發(fā)現(xiàn)，頁面直接顯示的是組件內(nèi)容。

? ? ? ? ? ? ? ? ?3.? 函數(shù)：（第一個參數(shù)也可以是函數(shù)，只不過這個函數(shù)執(zhí)行完畢后，需要返回一個標簽名的字符串或者組件對象）

代碼

2、第二個參數(shù)：是一個可選的參數(shù)，這個參數(shù)是一個Object. 關于第一個參數(shù)創(chuàng)建的標簽的屬性

??????? 是一個可選的參數(shù)，這個參數(shù)是一個對象Object，關于第一個參數(shù)的創(chuàng)建的標簽的屬性。

3、 第三個參數(shù): {String | Array}

????????? 這個參數(shù)是可選的，可以給其傳一個String或Array處理子節(jié)點