Vue中為什么要引入render函數(shù)的實現(xiàn)
前言
使用Vue腳手架創(chuàng)建項目的入口文件main.js中,默認代碼如下:
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
可以看到,代碼中通過import引入了App組件,但是卻并沒有通過components注冊,還使用了一個render函數(shù),而沒有利用template屬性
//上述代碼的等價寫法 import Vue from 'vue/dist/vue'//注意此處差異 import App from './App.vue' Vue.config.productionTip = false new Vue({ template: `<App/>`, components: { App }, }).$mount('#app')
想要知道上述代碼為什么等價,就需要從Vue的不同版本說起
背景
Vue有兩大部分組成,一個是核心功能,包括生命周期、事件處理等內(nèi)容,另一部分是模板解析器,用來對Vue模板進行解析。
Vue.js中包括了這兩部分的全部內(nèi)容(即完整版的vue),但是這樣會有一個問題,當項目開發(fā)完畢進行打包時,打包后的文件會引入完整版vue的全部代碼,但是實際上打包后的輸出文件中已經(jīng)不需要Vue模板解析器部分的代碼了(模板已經(jīng)被解析好了,瀏覽器可以直接運行),引入完整版Vue只會增大打包后文件的體積。
為了解決這個問題,Vue團隊提供了不同版本的Vue,vue.js為完整版的Vue,其他版本都是在vue.js完整版上進行的精簡,比如vue.runtime.*為Vue的運行版,不包括Vue模板解析器部分代碼。
既然Vue有不同的版本,那么我們在import引入Vue的時候,到底用的是哪個版本呢?
查看Vue包中的package.json文件可以發(fā)現(xiàn),ES6模塊化的入口文件是vue.runtime.esm.js,即Vue默認幫我們引入的是vue的運行版,其中不包括模板解析器部分代碼。
運行版Vue想要進行模板解析,就需要使用render函數(shù)。Vue官方案例中,入口文件main.js的內(nèi)容如下,其中使用了render函數(shù)進行模板解析。
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
如果我們使用template屬性進行模板解析,會報錯You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
//通過 import Vue from 'vue/dist/vue'引入完整版的vue,則代碼不會報錯 import Vue from 'vue'//默認引入運行版的vue,使用template編寫模板會報錯 Vue.config.productionTip = false new Vue({ template: `<h1>hello</h1>`, }).$mount('#app')
注意:上邊說的模板解析指的是解析vm配置對象的template屬性中定義的模板
組件中的模板(.vue中template標簽中的內(nèi)容),vue使用了vue-template-compiler幫助我們解析,而且可以看到他只在開發(fā)依賴中,在生產(chǎn)依賴中是沒有的,這也很好解釋,因為打包后的文件瀏覽器已經(jīng)可以直接運行了,不存在vue模板語法,也就不需要vue-template-compiler了。
"dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "vue-template-compiler": "^2.6.11" },
原理
在vm的配置對象中使用template屬性,可以通過HTML語法,創(chuàng)建vue模板頁面,我們編寫的Vue模板在底層先會被轉(zhuǎn)換成虛擬Dom,才會渲染到頁面中(真實Dom)。
在vm的配置對象中使用 render函數(shù) ,可以直接用js構(gòu)建虛擬DOM,免去了轉(zhuǎn)譯(Vue模板轉(zhuǎn)譯成虛擬Dom)的過程。
后記
到此這篇關(guān)于Vue中為什么要引入render函數(shù)的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue引入render函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問題
本篇文章主要介紹了vue2.x中請求之前數(shù)據(jù)顯示以及vuex緩存的問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07vue中的provide/inject的學(xué)習(xí)使用
本篇文章主要介紹了vue中的provide/inject的學(xué)習(xí)使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05vue在同一個頁面重復(fù)引用相同組件如何區(qū)分二者
這篇文章主要介紹了vue在同一個頁面重復(fù)引用相同組件如何區(qū)分二者,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08