前言

上一篇文章寫了：「后端小伙伴來學(xué)前端了」分析Vue腳手架結(jié)構(gòu)

簡(jiǎn)單說明了Vue的腳手架結(jié)構(gòu)，但是上篇文章還欠了個(gè)小點(diǎn)沒有說完，就在這篇文章中補(bǔ)齊。就是所謂的render函數(shù)。

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

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

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

這個(gè)代碼，我想咱們只要?jiǎng)?chuàng)建過vue項(xiàng)目，大家肯定都寫過了哈。

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

（我是純屬剛學(xué)，好奇寶寶😂）

---

按照我們最開始的學(xué)習(xí)：

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

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

看頁面：

頁面上是空白的，然后有以下報(bào)錯(cuò)信息：

//報(bào)錯(cuò) 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>)

這里的報(bào)錯(cuò)意思：您正在使用僅運(yùn)行時(shí)版本的Vue

解決方式提示有兩種：

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

注意:我們?cè)?main.js中所引用的import Vue from 'vue',其實(shí)是一個(gè)運(yùn)行時(shí)版本的vue，并非是完整的。

證明方式：

我們按照ctrl,用鼠標(biāo)點(diǎn)擊我們引入的vue，再點(diǎn)到vue的文件夾下的dist文件下的vue

在這源碼上加上一句話，看看會(huì)不會(huì)運(yùn)行。

雖然還是報(bào)錯(cuò)的，但是我們打印的那句話是已經(jīng)出來了。（雖然有那么多vue…js,但是咋知道是這個(gè)呢？測(cè)出來的，親測(cè)）

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

當(dāng)我引入完整版的vue之后，我項(xiàng)目中的內(nèi)容就已經(jīng)展示出來了，控制臺(tái)也不再報(bào)錯(cuò)。

---

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

原因大致如下：

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

---

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

二、render函數(shù)

我們先看看效果哈，當(dāng)我們改成殘缺版vue.js，寫上render函數(shù)，是成功可以運(yùn)行的

接下來我們一步一步把這個(gè)函數(shù)解析出來哈：

我們先拆成個(gè)普通函數(shù)，看看它是什么樣的哈

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

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

這個(gè)傳進(jìn)來的參數(shù)原來就是個(gè) 函數(shù)。它的返回值也是函數(shù)createElement()

首先說明一下我的demo項(xiàng)目的結(jié)構(gòu)，然后你再思考思考

我是有一個(gè)App組件和四個(gè)組件小組件，并且在App中進(jìn)行了引入，而這上面也正好有四個(gè)參數(shù)，

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

我們簡(jiǎn)單想一下就是一個(gè)App帶著四個(gè)小弟哈哈.

所以換而言之，如果我們寫成普通函數(shù)，就是如下狀態(tài)

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

因?yàn)槲覀兊慕M件全部都在 App 內(nèi)，所以我們實(shí)際只需要渲染 app 即可啦。

但是這里的其實(shí)不叫h，它真正的術(shù)語叫createElment

render (createElment) {return createElment(App) }

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

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

雖然有手就能用,但是就因?yàn)楹?jiǎn)單,我想我們對(duì)于它的理解,在很長(zhǎng)很長(zhǎng)的一段時(shí)間內(nèi)都會(huì)處于表面上吧.

后語

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。