資訊專欄INFORMATION COLUMN
摘要：獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建的區(qū)別標(biāo)簽空格分隔未分類在使用時(shí)，有獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建兩種版本可供選擇。運(yùn)行時(shí)構(gòu)建不包括模板編譯，不支持選項(xiàng)。這就形成了獨(dú)立構(gòu)建編譯器運(yùn)行時(shí)和運(yùn)行時(shí)構(gòu)建僅運(yùn)行時(shí)。
Vue.js 2.0 獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建的區(qū)別
標(biāo)簽（空格分隔）： 未分類
在使用 Vue.js 2.0 時(shí)，有獨(dú)立構(gòu)建（standalone）和運(yùn)行時(shí)構(gòu)建（runtime-only）兩種版本可供選擇。而在 Vue.js 1.0 中，卻沒(méi)有這種版本區(qū)別。到底該使用哪一個(gè)版本？這讓我有點(diǎn)懵逼的感覺(jué)。本著知其然還要知其所以然的精神，我決定好好研究下兩者間的區(qū)別。
Vue.js 的官方教程上是這么說(shuō)的：
獨(dú)立構(gòu)建包括編譯和支持 template 選項(xiàng)。 它也依賴于瀏覽器的接口的存在，所以你不能使用它來(lái)為服務(wù)器端渲染。
運(yùn)行時(shí)構(gòu)建不包括模板編譯，不支持 template 選項(xiàng)。運(yùn)行時(shí)構(gòu)建，可以用 render 選項(xiàng)，但它只在單文件組件中起作用，因?yàn)閱挝募M件的模板是在構(gòu)建時(shí)預(yù)編譯到 render 函數(shù)中，運(yùn)行時(shí)構(gòu)建只有獨(dú)立構(gòu)建大小的 30%，只有 16Kb min+gzip 大小。
Vue.js 的運(yùn)行過(guò)程實(shí)際上包含兩步。第一步，編譯器將字符串模板（template）編譯為渲染函數(shù)（render），稱之為編譯過(guò)程；第二步，運(yùn)行時(shí)實(shí)際調(diào)用編譯的渲染函數(shù)，稱之為運(yùn)行過(guò)程。
由于 Vue.js 1.0 的編譯過(guò)程需要依賴瀏覽器的 DOM，所以無(wú)法（或者說(shuō)沒(méi)有意義）將編譯器和運(yùn)行時(shí)分開(kāi)。因此在 Vue.js 1.0 分發(fā)包中，編譯器和運(yùn)行時(shí)是打包在一起，都在瀏覽器端執(zhí)行。
然而到了 Vue.js 2.0，為了支持服務(wù)端渲染（server-side rendering），編譯器不能依賴于 DOM，所以必須將編譯器和運(yùn)行時(shí)分開(kāi)。這就形成了獨(dú)立構(gòu)建（編譯器 + 運(yùn)行時(shí)）和運(yùn)行時(shí)構(gòu)建（僅運(yùn)行時(shí)）。顯而易見(jiàn)，運(yùn)行時(shí)構(gòu)建要小于獨(dú)立構(gòu)建。
在現(xiàn)代前端工程構(gòu)建中，通常會(huì)使用 vue-loader 和 vueify 預(yù)編譯模板。在這種情況下，只需要打包運(yùn)行時(shí)，而不需要打包編譯器，運(yùn)行時(shí)構(gòu)建即可滿足所需。當(dāng)然，如果你需要在前端使用 template 選項(xiàng)實(shí)時(shí)編譯模板，那么還是需要使用獨(dú)立構(gòu)建將編譯器發(fā)送到瀏覽器。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112489.html
摘要：獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建的區(qū)別標(biāo)簽空格分隔未分類在使用時(shí)，有獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建兩種版本可供選擇。運(yùn)行時(shí)構(gòu)建不包括模板編譯，不支持選項(xiàng)。這就形成了獨(dú)立構(gòu)建編譯器運(yùn)行時(shí)和運(yùn)行時(shí)構(gòu)建僅運(yùn)行時(shí)。 Vue.js 2.0 獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建的區(qū)別 標(biāo)簽（空格分隔）： 未分類 在使用 Vue.js 2.0 時(shí)，有獨(dú)立構(gòu)建（standalone）和運(yùn)行時(shí)構(gòu)建（runtime-only）兩種版本可供選...
摘要：獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建的區(qū)別標(biāo)簽空格分隔未分類在使用時(shí)，有獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建兩種版本可供選擇。運(yùn)行時(shí)構(gòu)建不包括模板編譯，不支持選項(xiàng)。這就形成了獨(dú)立構(gòu)建編譯器運(yùn)行時(shí)和運(yùn)行時(shí)構(gòu)建僅運(yùn)行時(shí)。 Vue.js 2.0 獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建的區(qū)別 標(biāo)簽（空格分隔）： 未分類 在使用 Vue.js 2.0 時(shí)，有獨(dú)立構(gòu)建（standalone）和運(yùn)行時(shí)構(gòu)建（runtime-only）兩種版本可供選...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...
閱讀 2376·2023-04-25 20:07
閱讀 3310·2021-11-25 09:43
閱讀 3670·2021-11-16 11:44
閱讀 2537·2021-11-08 13:14
閱讀 3185·2021-10-19 11:46
閱讀 901·2021-09-28 09:36
閱讀 2997·2021-09-22 10:56
閱讀 2382·2021-09-10 10:51
