Vue之render函數

render函數是vue中的一個重要函數

文檔地址：https://cn.vuejs.org/v2/api/#render

類型

(createElement: () => VNode) => VNode

詳細

字符串模板的代替方案，允許你發揮 JavaScript 最大的編程能力。該渲染函數接收一個 createElement 方法作為第一個參數用來創建 VNode。

如果組件是一個函數組件，渲染函數還會接收一個額外的 context 參數，為沒有實例的函數組件提供上下文信息。

Vue 選項中的 render 函數若存在，則 Vue 構造函數不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數。

 

在開發中的使用

//創建Vue實例對象---vm
new Vue({
    el:'#app',
    //render函數完成了這個功能：將App組件放入容器中
  render: h => h(App),

//傳統方式為什么不行？

// template:`<h1>你好啊</h1>`,

    // components:{App},

})

為什么要使用render函數？傳統方式為什么不行呢？要說明白這2個問題，那么我們必須說明引入的vue版本

關於不同版本的Vue：

    

        1.vue.js與vue.runtime.xxx.js的區別：

                (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。

                (2).vue.runtime.xxx.js是運行版的Vue，只包含：核心功能；沒有模板解析器。

        2.因為vue.runtime.xxx.js沒有模板解析器，所以不能使用template配置項，需要使用

            render函數接收到的createElement函數去指定具體內容。

 

我們可以看到在node_modules/vue/dist下面有眾多vue的版本 

 

 在本地中查看，我們可以看到只有完整版的vue.js為336KB,其他運行版的都是小於336KB的，這是因為運行版的vue.js是沒有模板解析器的

 

 

這就是為什么我們需要使用 render函數接收到的createElement函數去指定具體內容，並且為什么使用傳統方式不行的原因，是因為我們引入的vue版本默認是運行版本的

//這里默認引入的vue版本，默認是vue.runtime.js,也就是235KB那個
import Vue from 'vue'

我們這里第一時間都會想到我干嘛要去用運行版的vue.runtime.js，我腦子壞掉了嗎？我直接引入完整版的vue版本不行嗎？干嘛非得搞些奇奇怪怪的東西，我就要用帶模板解析器的，一步到位，不香嗎？

//直接引入完整版vue
import Vue from 'vue/dist/vue.js'

可以說非常香，指定使用完整版的vue.js后，毫無疑問的是我們不使用render函數，直接使用傳統方式也是ok的。

那我覺得開發人員腦子壞掉了，沒事找事，是吧，我尋思着我也不缺那336-235=101KB空間的人，內存空間都是G為單位，我完全可以任性點，囂張點。

那我們來看看開發人員的思路（為方便說明以擼貓為例子）

vue完整版：核心功能+模板解析器

擼貓：找一家貓店+直接買一只貓

vue運行版：核心功能

擼貓：找一家貓店+在店里擼貓

所以說，我們完全可以想擼貓的時候，去找一個擼貓的地方，擼擼貓，不一定非得去買一只貓，就像我修房子需要工人，我只需要租工人就行了，修完房子，結完錢，他們就可以走了，總不至於我買幾個工人給我修房子（當然是不可能的，只是為了讓大家理解vue完整版與運行版的區別），修完房子，工人還在，直接不走了，想想都可怕，我還得養工人，不是一直在浪費我的時間，浪費我的空間嗎？

所以在開發中，模板解析器使用后，就不必一直存在。通過vue運行版和render函數來解決這個問題。