在的腳手架中， 我們會看到在入口檔案 main.中的 new Vue的程式碼中有一段程式碼 render：h=>h(App);

這段程式碼不像我們 一般的使用vue 時的程式碼
我寫一下 一般的Vue 程式碼

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

上面的程式碼是我們正常能懂的程式碼， 有template,在template中可以引入其它的元件， 但為什麼腳手架中卻給了一個 render 的方法呢

根據自已的想法， 我們可以把腳手架的程式碼更改一下看看

啟動腳手架， npm run serve 看一下結果， 報錯了， 資訊如下

所以， 我們可以說 ， 腳手架給我們引入的 vue 是沒有模板解析器的一個vue,如果要解析模板， 就要使用 render 函式的幫助
我們來到 專案的 node_modules 資料夾中看一下 我們引入的到底是 哪一個 vue

import Vue from 'vue'

我們開啟 vue / dist 的檔案， 可以看到很多的檔案， 如圖

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

我們再看第二種，引入沒有模板解析器的vue,使用 render,
先說一個 render
render 是一個函式， 並且有一個引數， 這個引數的使用就是建立一個 節點

通過console.log， 我們可以看到 引數 createElement 也是一個函式， 它建立了一個 VNode 的物件

下面我們使用 箭頭函式來對 render 來進行精簡

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

render 的寫法就是這樣來的

下面說一下，為什麼 腳手架會引入一個不完整的vue來使用
我們知道， vue程式碼完成之後是要打包的， 其中少不了vue的核心程式碼，當我們打包好之後， 我們其實是不需要再來解析模板的， 那麼， vue的核心程式碼中的模板解析器根本用不著， 所以，vue為了使程式碼的體積減少， 就去掉了模板解析器，但是我們開發的時候， 又要使用， 所以就建立了一個 render 方法來解析模板，
總之， 它的目的就是讓打包後的程式碼體積儘量小

到此這篇關於Vue腳手架中的 render 理解的文章就介紹到這了,更多相關Vue render 理解內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！