1. 前言

在使用 vue-cli2 腳手架構(gòu)建項目時，如果選擇了Runtime-only模式，那么在main.js文件中會有下面一段代碼：

有關(guān)Runtime + Compiler的介紹可以看這篇文章：Vue中 Runtime + Compiler 和 Runtime-only 兩種模式含義和區(qū)別

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  render: h => h(App)
})

2. 分析render函數(shù)

2.1 render 函數(shù)的作用

Vue 推薦在絕大多數(shù)情況下使用模板來創(chuàng)建你的 HTML。然而在一些場景中，真的需要 JavaScript 的完全編程的能力。這時可以用渲染函數(shù)，它比模板更接近編譯器。

render 函數(shù)和 template 一樣都是創(chuàng)建 html 模板的，但是有些場景中用 template 實現(xiàn)起來代碼冗長繁瑣而且有大量重復，這時候就可以用 render 函數(shù)。

2.2 render 函數(shù)講解

render 函數(shù)即渲染函數(shù)，它是個函數(shù)，它的參數(shù) createElement 也是個函數(shù)。

上邊的代碼中 render: h => h(App) ，這是 ES6的箭頭函數(shù)的寫法，可以把 h 當作 createElement 的別名。所以這段代碼其實相當于：

render: function (createElement) {
    return createElement(App)
}

2.3 createElement 函數(shù)講解

這個函數(shù)的作用就是生成一個 VNode節(jié)點，render 函數(shù)得到這個 VNode 節(jié)點之后，返回給 Vue.js 的 mount 函數(shù)，渲染成真實 DOM 節(jié)點，并掛載到根節(jié)點上。

createElement 函數(shù)的返回值是 VNode（即：虛擬節(jié)點）
有關(guān)對 VNode 的介紹可以看這篇博客：VNode簡介

createElement 函數(shù)的3個參數(shù)

• 一個 HTML 標簽字符串，組件選項對象，或者解析上述任何一種的一個 async 異步函數(shù)。類型：String | Object | Function。必需。
• 一個包含模板相關(guān)屬性的數(shù)據(jù)對象，你可以在 template 中使用這些特性。類型：Object?？蛇x。
• 子虛擬節(jié)點 (VNodes)，由 createElement() 構(gòu)建而成，也可以使用字符串來生成“文本虛擬節(jié)點”。類型：String | Array?？蛇x。

實現(xiàn)createElement函數(shù)

1、普通用法

// main.js文件
new Vue({
  el: '#app',
  render:function (createElement) {
    //1.普通用法
    // createElement(標簽，{屬性}，[內(nèi)容])
    return createElement("h2",{class:"box"},['hello',createElement("button",["按鈕"])])
  }
})

運行效果如圖所示：

2、我們也可以自定義一個組件，傳遞給render函數(shù)

// ...
let Cpn = {
  template:`<h2>{{message}}</h2>`,
  data(){
    return {
      message:"我是組件"
    }
  }
}
new Vue({
  el: '#app',
  render:function (createElement) {
    //2.使用組件
    return createElement(Cpn)
  }
})

運行效果如圖所示：

3、既然我們能夠使用組件，那么App組件也是可以的

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  render:function (createElement) {
    return createElement(App)
  }
})

效果如圖所示：

3. 參考資料

render渲染函數(shù) — Vue.js官網(wǎng)

補充

關(guān)于Vue中 render: h => h(App) 的具體含義的理解

?一、問題：

https://github.com/vuejs-templates/webpack-simple/blob/master/template/src/main.js

import Vue from 'vue'
import App from './App.vue'
new Vue({
? el: '#app',
? render: h => h(App)
})

vue的代碼中有這么一段，令人第一眼對這個 h 函數(shù)十分困惑？？

二、原因：

經(jīng)過查找相關(guān)資料后發(fā)現(xiàn)：

render: h => h(App) 是下面內(nèi)容的縮寫：

render: function (createElement) {
? ? return createElement(App);
}

進一步縮寫為(ES6 語法)：

render (createElement) {
? ? return createElement(App);
}

再進一步縮寫為：

render (h){
? ? return h(App);
}

按照 ES6 箭頭函數(shù)的寫法，就得到了：

render:?h?=>?h(App);

其中 根據(jù) Vue.js 作者 Even You 在 Vue 的 issue 中的回復，h 的含義如下：

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".

它來自單詞 hyperscript，這個單詞通常用在 virtual-dom 的實現(xiàn)中。Hyperscript 本身是指 
生成HTML 結(jié)構(gòu)的 script 腳本，因為 HTML 是 hyper-text markup language 的縮寫（超文本標記語言）

三、總結(jié)：

h 函數(shù)的本質(zhì)是createElement 函數(shù)，這個函數(shù)的作用就是生成一個 VNode節(jié)點，render 函數(shù)得到這個 VNode 節(jié)點之后，返回給 Vue.js 的 mount 函數(shù)，渲染成真實 DOM 節(jié)點，并掛載到根節(jié)點上

而之所以要 叫 h，根據(jù)作者解釋是，來源于 hyper script，

........

個人覺得可讀性差了很多，就算是外國人不經(jīng)解釋也很難理解這個 h 函數(shù)

不如直接 createElement 

最新評論