[面試專題]Vue.js 2.0 獨立構建和運行時構建的區別

svtter 發布于2019-08-20 19:00 / 2588人閱讀

摘要：獨立構建和運行時構建的區別標簽空格分隔未分類在使用時，有獨立構建和運行時構建兩種版本可供選擇。運行時構建不包括模板編譯，不支持選項。這就形成了獨立構建編譯器運行時和運行時構建僅運行時。

Vue.js 2.0 獨立構建和運行時構建的區別

標簽（空格分隔）：未分類

在使用 Vue.js 2.0 時，有獨立構建（standalone）和運行時構建（runtime-only）兩種版本可供選擇。而在 Vue.js 1.0 中，卻沒有這種版本區別。到底該使用哪一個版本？這讓我有點懵逼的感覺。本著知其然還要知其所以然的精神，我決定好好研究下兩者間的區別。

Vue.js 的官方教程上是這么說的：

獨立構建包括編譯和支持 template 選項。它也依賴于瀏覽器的接口的存在，所以你不能使用它來為服務器端渲染。
運行時構建不包括模板編譯，不支持 template 選項。運行時構建，可以用 render 選項，但它只在單文件組件中起作用，因為單文件組件的模板是在構建時預編譯到 render 函數中，運行時構建只有獨立構建大小的 30%，只有 16Kb min+gzip 大小。

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 選項實時編譯模板，那么還是需要使用獨立構建將編譯器發送到瀏覽器。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85018.html

[面試專題]Vue.js 2.0 獨立構建和運行時構建的區別

摘要：獨立構建和運行時構建的區別標簽空格分隔未分類在使用時，有獨立構建和運行時構建兩種版本可供選擇。運行時構建不包括模板編譯，不支持選項。這就形成了獨立構建編譯器運行時和運行時構建僅運行時。 Vue.js 2.0 獨立構建和運行時構建的區別標簽（空格分隔）：未分類在使用 Vue.js 2.0 時，有獨立構建（standalone）和運行時構建（runtime-only）兩種版本可供選...

李義 2019-08-01 17:30 評論0 收藏0
[面試專題]Vue.js 2.0 獨立構建和運行時構建的區別

摘要：獨立構建和運行時構建的區別標簽空格分隔未分類在使用時，有獨立構建和運行時構建兩種版本可供選擇。運行時構建不包括模板編譯，不支持選項。這就形成了獨立構建編譯器運行時和運行時構建僅運行時。 Vue.js 2.0 獨立構建和運行時構建的區別標簽（空格分隔）：未分類在使用 Vue.js 2.0 時，有獨立構建（standalone）和運行時構建（runtime-only）兩種版本可供選...

freewolf 2019-08-29 13:16 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

kamushin233 2019-08-29 12:34 評論0 收藏0