vue獨立構建和執行構建

概念：有兩種構建方式，

獨立構建和執行構建。它們的區別在於前者包含模板編譯器而後者不包含。

模板編譯器：模板編譯器的職責是將模板字串編譯為純 j**ascript 的渲染函式。如果你想要在元件中使用template選項，你就需要編譯器。

模板字串：template

el:提供乙個在頁面上已存在的 dom 元素作為 vue 例項的掛載目標。可以是 css 選擇器，也可以是乙個 htmlelement 例項。

template:乙個字串模板作為 vue 例項的標識使用。模板將會替換掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。

render:字串模板的代替方案，允許你發揮 j**ascript 最大的程式設計能力。render 函式接收乙個createelement方法作為第乙個引數用來建立vnode。

為什麼要使用獨立構建和執行時構建？

vue.js 的執行過程實際上包含兩步。第一步，編譯器將字串模板（template）編譯為渲染函式（render），稱之為編譯過程；第二步，執行時實際呼叫編譯的渲染函式，稱之為執行過程

由於 vue.js 1.0 的編譯過程需要依賴瀏覽器的 dom，所以無法（或者說沒有意義）將編譯器和執行時分開。因此在 vue.js 1.0 分發包中，編譯器和執行時是打包在一起，都在瀏覽器端執行。

然而到了 vue.js 2.0，為了支援服務端渲染（server-side rendering），編譯器不能依賴於 dom，所以必須將編譯器和執行時分開。這就形成了獨立構建（編譯器 + 執行時）和執行時構建（僅執行時）。顯而易見，執行時構建要小於獨立構建。

在現代前端工程構建中，通常會使用 vue-loader 和 vueify 預編譯模板。在這種情況下，只需要打包執行時，而不需要打包編譯器，執行時構建即可滿足所需。當然，如果你需要在前端使用template選項實時編譯模板，那麼還是需要使用獨立構建將編譯器傳送到瀏覽器。

總結：兩種編譯模式是為了伺服器端渲染和瀏覽器執行兩種不同環境產生的

一般來講獨立構建適用於伺服器端渲染

瀏覽器實際執行時為執行時構建但是如果需要在前端使用template選項實時編譯模板，那麼還是需要使用獨立構建將編譯器傳送到瀏覽器。