前言

上一篇文章寫了：「后端小伙伴來學前端了」分析Vue腳手架結構

簡單說明了Vue的腳手架結構，但是上篇文章還欠了個小點沒有說完，就在這篇文章中補齊。就是所謂的render函數。

一、main.js中引入的原來是殘缺版vue.js

我們來接著看看main.js這個入口文件。

// 引入vue import Vue from 'vue' // 引入app組件 import App from './App.vue'// 關閉生產提示 Vue.config.productionTip = false// 創建 Vue 實例對象 Vm new Vue({render: h => h(App) // 這里不是一下就能說完的，這里簡單說下：// App 組件渲染，這里的 h 即是 vm.$createElement ,便是在vm.render這個階段// 最粗略的理解，執行完這里，就是將app 放入了 容器中去了。 }).$mount('#app') // Vue 的$mount()為手動掛載 這個也不是一下能說清，我也學藝不精，以后再補上 哈哈

這個代碼，我想咱們只要創建過vue項目，大家肯定都寫過了哈。

但是不知道大家有沒有糾結過或者思考過new Vue() 中的 render:h=>h(App)是干什么。

（我是純屬剛學，好奇寶寶😂）

---

按照我們最開始的學習：

下面這種寫法也是可行的吧，組件我們引入了，也注冊了。

import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({template:'<App></App>' components:{App} }).$mount('#app')

看頁面：

頁面上是空白的，然后有以下報錯信息：

//報錯 vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. //提示的解決方式 Either pre-compile the templates into render functions,or use the compiler-included build.(found in <Root>)

這里的報錯意思：您正在使用僅運行時版本的Vue

解決方式提示有兩種：

可以將模板預編譯為呈現函數， 就是我們之前寫的 render 函數 也可以使用編譯器附帶的構建。（換成人話就是使用完整版的vue，包含模板編譯器版本的vue）

注意:我們在 main.js中所引用的import Vue from 'vue',其實是一個運行時版本的vue，并非是完整的。

證明方式：

我們按照ctrl,用鼠標點擊我們引入的vue，再點到vue的文件夾下的dist文件下的vue

在這源碼上加上一句話，看看會不會運行。

雖然還是報錯的，但是我們打印的那句話是已經出來了。（雖然有那么多vue…js,但是咋知道是這個呢？測出來的，親測）

報錯提示中，告訴我們說，如果引入完整版vue也能解決問題，那么我們就引用完整路徑，來測試一下，看可以嗎？

當我引入完整版的vue之后，我項目中的內容就已經展示出來了，控制臺也不再報錯。

---

到這個時候，大家也會想，我們既然可以通過引入完整的 vue.js 來進行模板的解析，為什么還要寫那個 render函數呢？

原因大致如下：

這個模板引擎只是在我們生產的時候能夠用到，當我們用 webpack 進行打包的時候，就用不上這個vue這個自帶的模板引擎了， webpack已經幫我們把vue文件解析成了瀏覽器認識的.js、.css、.html文件了，那么vue的引擎也沒必要繼續存在那啦丫。（你可以把它當做個工具人，用就要，不用就扔掉哈哈）

---

但是如果我們一定殘缺版的vue呢？這個render函數在這里是做什么呢?

二、render函數

我們先看看效果哈，當我們改成殘缺版vue.js，寫上render函數，是成功可以運行的

接下來我們一步一步把這個函數解析出來哈：

我們先拆成個普通函數，看看它是什么樣的哈

render (h) {console.log(h)return null }

我把拆開，輸出來是下面這樣的：

這個傳進來的參數原來就是個 函數。它的返回值也是函數createElement()

首先說明一下我的demo項目的結構，然后你再思考思考

我是有一個App組件和四個組件小組件，并且在App中進行了引入，而這上面也正好有四個參數，

而createElement()中正好是一個vm，后面跟著這四個參數。

我們簡單想一下就是一個App帶著四個小弟哈哈.

所以換而言之，如果我們寫成普通函數，就是如下狀態

render (h) {console.log(h)return h(App) }

因為我們的組件全部都在 App 內，所以我們實際只需要渲染 app 即可啦。

但是這里的其實不叫h，它真正的術語叫createElment

render (createElment) {return createElment(App) }

然后再簡化成箭頭函數就成了腳手架中的 render: h => h(App)
官方解釋

這里 render 其實就是App組件渲染,腳手架方便確實方便了很多,但是真的封裝了很多我們看不到的東西.

雖然有手就能用,但是就因為簡單,我想我們對于它的理解,在很長很長的一段時間內都會處于表面上吧.

后語

大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vue脚手架中 render 函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。