在我們使用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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。

轉載于:https://www.cnblogs.com/webing/p/10733999.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的了解vue里的Runtime Only和Runtime+Compiler的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。