1. 問題描述

在使用 vue-cli 腳手架構(gòu)建項(xiàng)目時(shí)，會(huì)遇到一個(gè)構(gòu)建選項(xiàng) Vue build，有兩個(gè)選擇，Runtime + Compiler 和 Runtime-only ，如圖所示

Runtime + Compiler: recommended for most users

運(yùn)行程序+編譯器：推薦給大多數(shù)用戶

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

僅運(yùn)行程序: 比上面那種模式輕大約 6KB，但是 template (或任何特定于vue的html)只允許在.vue文件中使用——其他地方用需要 render 函數(shù)

2. 兩種模式的區(qū)別

1. runtime-only 比 runtime-compiler 輕 6kb，代碼量更少
2. runtime-only 運(yùn)行更快，性能更好
3. runtime-only 其實(shí)只能識(shí)別render函數(shù)，不能識(shí)別template，.vue 文件中的template也是被 vue-template-compiler 翻譯成了render函數(shù)，所以只能在.vue里寫 template

有關(guān)vue中的render函數(shù)可以看這篇文章：vue中的render函數(shù)

3. 解釋

兩種模式生成的 腳手架 即（代碼模板）主要區(qū)別在 main.js 中，其它基本上是一樣的：

我們?cè)倏匆粡垐D：

runtime + compiler 中 Vue 的運(yùn)行過程

對(duì)于 runtime-compiler 來說，它的代碼運(yùn)行過程是：template -> ast -> render -> virtual dom -> UI

• 首先將vue中的template模板進(jìn)行解析解析成abstract syntax tree （ast）抽象語法樹
• 將抽象語法樹在編譯成render函數(shù)
• 將render函數(shù)再翻譯成virtual dom（虛擬dom）
• 將虛擬dom顯示在瀏覽器上

runtime-only 中 Vue 的運(yùn)行過程

對(duì)于 runtime-only來說，它是從 render -> virtual dom -> UI

• 可以看出它省略了從template -> ast -> render的過程
• 所以runtime-only比runtime-compiler更快，代碼量更少
• runtime-only 模式中不是沒有寫 template ，只是把 template 放在了.vue 的文件中了，并有一個(gè)叫 vue-template-compiler 的開發(fā)依賴時(shí)將.vue文件中的 template 解析成 render 函數(shù)。 因?yàn)槭情_發(fā)依賴，不在最后生產(chǎn)中，所以最后生產(chǎn)出來的運(yùn)行的代碼沒有template

4. 總結(jié)

如果在之后的開發(fā)中，你依然使用template，就需要選擇 Runtime + Compiler

如果你之后的開發(fā)中，使用的是.vue文件夾開發(fā)，那么可以選擇 Runtime-only

補(bǔ)充

對(duì)Vue中 runtime-compiler 和 runtime-only 兩種模式的理解

一、問題

在使用 vue-cli 腳手架構(gòu)建項(xiàng)目時(shí)，會(huì)遇到一個(gè)構(gòu)建選項(xiàng) Vue build，有兩個(gè)選項(xiàng)，Runtime + Compiler和Runtime-only：

· Runtime + Compiler: recommended for most users

（運(yùn)行程序+編譯器:推薦給大多數(shù)用戶）

· Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere

（僅運(yùn)行程序: 比上面那種模式輕大約 6KB min+gzip，但是 template (或任何特定于vue的html)只允許在.vue文件中使用——其他地方用需要 render 函數(shù)）

其實(shí)構(gòu)建時(shí)的英文解釋已經(jīng)很簡潔清晰了，但是第一次看的話或者不了解英文可能還是會(huì)比較 懵逼

下面是對(duì)兩種模式詳細(xì)的比較與解釋

二、區(qū)別

1、runtime-only 比 runtime-compiler 輕 6kb

2、runtime-only 運(yùn)行更快

3、runtime-only 其實(shí)只能識(shí)別render函數(shù)，不能識(shí)別template，.vue文件中的也是被 vue-template-compiler 翻譯成了

      render函數(shù)，所以只能在.vue里寫 template

三、解釋

1、兩種模式生成的 腳手架 即（代碼模板）其實(shí)區(qū)別只有在 main.js 中，其他都是一樣的：

可以發(fā)現(xiàn)一個(gè) 是用 template + component 而另一個(gè) 則是 用 render 函數(shù)

2、render函數(shù): h => h(App) :

具體的解釋可以看我上一篇博文:

http://www.dbjr.com.cn/javascript/287639zan.htm

簡單地說就是 h 函數(shù)就是 createElement 函數(shù)，用于創(chuàng)建 虛擬DOM

3、runtime + compiler 中 Vue 的運(yùn)行過程:

(1)首先將vue中的模板進(jìn)行解析解析成abstract syntax tree （ast）抽象語法樹

(2)將抽象語法樹在編譯成render函數(shù)

(3)將render函數(shù)再翻譯成virtual dom 虛擬dom

(4)將虛擬dom顯示在瀏覽器上

4、runtime-only 更快的原因：

runtime-only比runtime-compiler更快，因?yàn)樗÷粤藇ue內(nèi)部過程中的第一個(gè)過程，如果是runtime-compiler

那么main.js中就會(huì)出現(xiàn)template從而需要過程一導(dǎo)致增加了一個(gè)過程，同時(shí)增加了大小

而 runtime-only 模式中不是沒有寫 template ，只是把 template 放在了.vue 的文件中了

并有一個(gè)叫 vue-template-compiler的在開發(fā)依賴時(shí)將.vue文件中的 template 解析成 render 函數(shù)了

因?yàn)槭情_發(fā)依賴，不在最后生產(chǎn)中，所以最后生產(chǎn)出來的運(yùn)行的代碼沒有template

最新評(píng)論