在vue的腳手架中， 我們會(huì)看到在入口文件 main.js中的 new Vue的代碼中有一段代碼 render：h=>h(App);

這段代碼不像我們 一般的使用vue 時(shí)的代碼
我寫(xiě)一下 一般的Vue 代碼

	import Acomponent from "../Acomponent"
	vm = new Vue({
		el:"#app"
		data(){
			return {
				a:"aaa",
				b:"bbb"
			}
		},
		template:`<div>
			<span>this is a test</span>
			<Acomponent></Acomponent>
		</div>`,
		components:{
			Acomponent
		}
	})

上面的代碼是我們正常能懂的代碼， 有template , 在template中可以引入其它的組件， 但為什么腳手架中卻給了一個(gè) render 的方法呢

根據(jù)自已的想法， 我們可以把腳手架的代碼更改一下看看

啟動(dòng)腳手架， npm run serve 看一下結(jié)果， 報(bào)錯(cuò)了， 信息如下

所以， 我們可以說(shuō) ， 腳手架給我們引入的 vue 是沒(méi)有模板解析器的一個(gè)vue , 如果要解析模板， 就要使用 render 函數(shù)的幫助
我們來(lái)到 項(xiàng)目的 node_modules 文件夾中看一下 我們引入的到底是 哪一個(gè) vue

import Vue from 'vue'

我們打開(kāi) vue / dist 的文件， 可以看到很多的文件， 如圖

錯(cuò)誤提示上說(shuō)我們有兩種方法解決， 一種是引入完整的vue.js 另一種是使用 render ,
我們來(lái)引入完整版的來(lái)看一下， 可不可以解決

我們?cè)倏吹诙N，引入沒(méi)有模板解析器的vue, 使用 render,
先說(shuō)一個(gè) render
render 是一個(gè)函數(shù)， 并且有一個(gè)參數(shù)， 這個(gè)參數(shù)的使用就是創(chuàng)建一個(gè) 節(jié)點(diǎn)

通過(guò)console.log， 我們可以看到 參數(shù) createElement 也是一個(gè)函數(shù)， 它創(chuàng)建了一個(gè) VNode 的對(duì)象

下面我們使用 箭頭函數(shù)來(lái)對(duì) render 來(lái)進(jìn)行精簡(jiǎn)

	render(createElement){
		return createElement("h1","123");
	}
	//使用箭頭函數(shù)簡(jiǎn)化
	render:(createElement)=>{return createElement("h1","123")}
	//箭頭函數(shù)中 只有一個(gè)參數(shù)， 可以不寫(xiě) 小括號(hào)   如果方法體中只有一行， 可以不用寫(xiě) 大括號(hào)， 返回值也可以不用寫(xiě)return
	//所以上面的代碼可以簡(jiǎn)化成這樣
	render:createElemnet=>crementElement("h1","123")
	//同樣， createElement 本來(lái)就是自已自定義的， 我們可以把名稱(chēng)也改一下
	render: h=>h("h1","123")
	//這樣就很像腳手架中的代碼了
	h函數(shù)中， 如果是原生的html 標(biāo)簽的話(huà)， 就是這樣寫(xiě)， 如果是vue 的組件的話(huà)， 可以直接傳入
	所有就有了
	render:h=>h(App)

render 的寫(xiě)法就是這樣來(lái)的

下面說(shuō)一下，為什么 腳手架會(huì)引入一個(gè)不完整的vue來(lái)使用
我們知道， vue代碼完成之后是要打包的， 其中少不了vue的核心代碼，當(dāng)我們打包好之后， 我們其實(shí)是不需要再來(lái)解析模板的， 那么， vue的核心代碼中的模板解析器根本用不著， 所以，vue為了使代碼的體積減少， 就去掉了模板解析器，但是我們開(kāi)發(fā)的時(shí)候， 又要使用， 所以就創(chuàng)建了一個(gè) render 方法來(lái)解析模板，
總之， 它的目的就是讓打包后的代碼體積盡量小

到此這篇關(guān)于Vue腳手架中的 render 理解的文章就介紹到這了,更多相關(guān)Vue render 理解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論