在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ò)了， 信息如下

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

import Vue from 'vue'

我們打開 vue / dist 的文件， 可以看到很多的文件， 如圖

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

我們再看第二種，引入沒有模板解析器的vue, 使用 render,
先說一個(gè) render
render 是一個(gè)函數(shù)， 并且有一個(gè)參數(shù)， 這個(gè)參數(shù)的使用就是創(chuàng)建一個(gè) 節(jié)點(diǎn)

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

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

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

render 的寫法就是這樣來的

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

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

最新評(píng)論