快捷導(dǎo)航

關(guān)于Vue腳手架中render 理解

更新時(shí)間：2021年10月14日 09:30:55 作者：A黃俊輝A

這篇文章主要介紹了Vue腳手架中的 render 理解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

在這里插入圖片描述

這段代碼不像我們一般的使用vue 時(shí)的代碼
我寫一下一般的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'

在這里插入圖片描述

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

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

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

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

您可能感興趣的文章: