快捷導(dǎo)航

Vue中為什么要引入render函數(shù)的實(shí)現(xiàn)

更新時(shí)間：2022年01月10日 09:41:21 作者：scluis

本文主要介紹了Vue中為什么要引入render函數(shù)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

使用Vue腳手架創(chuàng)建項(xiàng)目的入口文件main.js中，默認(rèn)代碼如下：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

可以看到，代碼中通過(guò)import引入了App組件，但是卻并沒(méi)有通過(guò)components注冊(cè)，還使用了一個(gè)render函數(shù)，而沒(méi)有利用template屬性

//上述代碼的等價(jià)寫(xiě)法
import Vue from 'vue/dist/vue'//注意此處差異
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    template: `<App/>`,
    components: { App },
}).$mount('#app')

想要知道上述代碼為什么等價(jià)，就需要從Vue的不同版本說(shuō)起

背景

Vue有兩大部分組成，一個(gè)是核心功能，包括生命周期、事件處理等內(nèi)容，另一部分是模板解析器，用來(lái)對(duì)Vue模板進(jìn)行解析。

Vue.js中包括了這兩部分的全部?jī)?nèi)容（即完整版的vue），但是這樣會(huì)有一個(gè)問(wèn)題，當(dāng)項(xiàng)目開(kāi)發(fā)完畢進(jìn)行打包時(shí)，打包后的文件會(huì)引入完整版vue的全部代碼，但是實(shí)際上打包后的輸出文件中已經(jīng)不需要Vue模板解析器部分的代碼了（模板已經(jīng)被解析好了，瀏覽器可以直接運(yùn)行），引入完整版Vue只會(huì)增大打包后文件的體積。

為了解決這個(gè)問(wèn)題，Vue團(tuán)隊(duì)提供了不同版本的Vue，vue.js為完整版的Vue，其他版本都是在vue.js完整版上進(jìn)行的精簡(jiǎn)，比如vue.runtime.*為Vue的運(yùn)行版，不包括Vue模板解析器部分代碼。

既然Vue有不同的版本，那么我們?cè)趇mport引入Vue的時(shí)候，到底用的是哪個(gè)版本呢？

查看Vue包中的package.json文件可以發(fā)現(xiàn)，ES6模塊化的入口文件是vue.runtime.esm.js，即Vue默認(rèn)幫我們引入的是vue的運(yùn)行版，其中不包括模板解析器部分代碼。

運(yùn)行版Vue想要進(jìn)行模板解析，就需要使用render函數(shù)。Vue官方案例中，入口文件main.js的內(nèi)容如下，其中使用了render函數(shù)進(jìn)行模板解析。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

如果我們使用template屬性進(jìn)行模板解析，會(huì)報(bào)錯(cuò)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.

//通過(guò) import Vue from 'vue/dist/vue'引入完整版的vue，則代碼不會(huì)報(bào)錯(cuò)

import Vue from 'vue'//默認(rèn)引入運(yùn)行版的vue，使用template編寫(xiě)模板會(huì)報(bào)錯(cuò)

Vue.config.productionTip = false

new Vue({
    template: `<h1>hello</h1>`,
}).$mount('#app')

注意：上邊說(shuō)的模板解析指的是解析vm配置對(duì)象的template屬性中定義的模板

組件中的模板（.vue中template標(biāo)簽中的內(nèi)容），vue使用了vue-template-compiler幫助我們解析，而且可以看到他只在開(kāi)發(fā)依賴(lài)中，在生產(chǎn)依賴(lài)中是沒(méi)有的，這也很好解釋?zhuān)驗(yàn)榇虬蟮奈募g覽器已經(jīng)可以直接運(yùn)行了，不存在vue模板語(yǔ)法，也就不需要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"
},