在我們使用vue-cli的時候,會提示你安裝的版本

可以看到有兩種版本: Runtime Only 版本 和 Runtime+Compiler 版本。
1.Runtime Only
我們在使用 Runtime Only 版本的 Vue.js 的時候,通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件編譯成 JavaScript,因為是在編譯階段做的,所以它只包含運行時的 Vue.js 代碼,因此代碼體積也會更輕量。 在將 .vue 文件編譯成 JavaScript的編譯過程中會將組件中的template模板編譯為render函數,所以我們得到的是render函數的版本。所以運行的時候是不帶編譯的,編譯是在離線的時候做的。
2.Runtime+Compiler
我們如果沒有對代碼做預編譯,但又使用了 Vue 的 template 屬性並傳入一個字符串,則需要在客戶端編譯模板,如下所示:
// 需要編譯器的版本
new Vue({
template: '{{ hi }}'
})
// 這種情況不需要
new Vue({
render (h) {
return h('div', this.hi)
}
})
因為在 Vue.js 2.0 中,最終渲染都是通過 render 函數,如果寫 template 屬性,則需要編譯成 render 函數,那么這個編譯過程會發生運行時,所以需要帶有編譯器的版本。
很顯然,這個編譯過程對性能會有一定損耗,所以通常我們更推薦使用 Runtime-Only 的 Vue.js。
只有以下情況會用到compiler:
1.有指定template;
2.沒指定template,也沒指定render(這時候使用的就是被掛載元素的outerHtml)。
所以,沒有使用到compiler的情況只有:沒有指定template,但指定了render。
有時會遇到這樣的錯誤:
[Vue warn]: 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.
以上提到,解決這個問題有兩種方式,但大多會選擇后者,也就是使用全功能的vue(runtime+compiler),這個版本的vue文件相比僅包含runtime的版本體積要大,而且運行時的compiler轉換會消耗性能,compiler過程其實可以放到構建過程中進行。
總結就是,如果可以的話,盡量使用runtime版的vue文件。
作者:dream_Q
鏈接:https://www.jianshu.com/p/466510d84e36
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權並注明出處。