關(guān)于Vue腳手架中render 理解
在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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)
在本篇文章里小編給大家分享的是一篇關(guān)于vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)內(nèi)容,有興趣的的朋友們可以學(xué)習(xí)下。2021-12-12vue3+ts+vite2項(xiàng)目實(shí)戰(zhàn)踩坑記錄
最近嘗試上手Vue3+TS+Vite,對(duì)比起Vue2有些不適應(yīng),但還是真香,下面這篇文章主要給大家介紹了關(guān)于vue3+ts+vite2項(xiàng)目的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09vue返回上一頁(yè)面時(shí)不刷新問(wèn)題及解決方案
這篇文章主要介紹了vue返回上一頁(yè)面時(shí)不刷新問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05Vue重要修飾符.sync對(duì)比v-model的區(qū)別及使用詳解
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對(duì)比及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07