Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)
在我們使用 vue時(shí)，我們可以引用兩個(gè)不同版本的 Vue，分別是 Vue完整版（vue.js）和 Vue（vue.runtime.js ）非完整版，那么它們的區(qū)別是什么呢，今天我們就來(lái)分析下這兩個(gè)不同版本之間的區(qū)別。
1、文件名
2、文件大小
完整版：同時(shí)包含編譯器和運(yùn)行時(shí)的版本。
編譯器：用來(lái)將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼。
而非完整版不包含編譯器，體積約比完整版小 30%。
3、視圖
完整版
視圖寫(xiě)在 HTML里或者 template選項(xiàng)里，由于有 compiler(編譯器)的存在，完整版運(yùn)行時(shí)：用來(lái)創(chuàng)建 Vue 實(shí)例、渲染并處理虛擬 DOM 等的代碼?；旧暇褪浅ゾ幾g器的其它一切。
非完整版
完整版運(yùn)行時(shí)：當(dāng)使用 vue-loader 或 vueify 的時(shí)候，*.vue 文件內(nèi)部的模板會(huì)在構(gòu)建時(shí)預(yù)編譯成 JavaScript。你在最終打好的包里實(shí)際上是不需要編譯器的，所以只用運(yùn)行時(shí)版本即可。
// 不需要編譯器
new Vue({
render (h) {
return h('div', this.hi)
}
})
// 需要編譯器
new Vue({
template: '<div>{{ hi }}</div>'
})
4、配置
從 webpack 引入,完整版需要配置 alias,非完整版 是默認(rèn)配置;
從 @vue/cli 引入,完整版需要額外配置,非完整版 是默認(rèn)配置。
總結(jié)
既然這兩者有這么多不同,那我們平時(shí)用哪個(gè)版本呢?
當(dāng)然是用非完整版了,理由如下:
1.保證用戶體驗(yàn)，用戶下載的JS文件體積更小，但只支持h函數(shù)
2.保證開(kāi)發(fā)體驗(yàn)，開(kāi)發(fā)者可直接在vue文件里寫(xiě)HTML標(biāo)簽，而不寫(xiě) h函數(shù)
3.活讓loader做，vue-loader 會(huì)把vue文件里的HTML轉(zhuǎn)為h函數(shù),這樣我不用寫(xiě)太多麻煩的 h函數(shù)就可做到和完整版一樣的事,還更節(jié)約文件大小,提升用戶體驗(yàn)。
以上所述是小編給大家介紹的Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)，希望對(duì)大家有所幫助！
相關(guān)文章
基于Vue實(shí)現(xiàn)簡(jiǎn)單的貪食蛇游戲
貪食蛇是一個(gè)非常經(jīng)典的游戲,?在游戲中,?玩家操控一條細(xì)長(zhǎng)的直線,?它會(huì)不停前進(jìn),?玩家只能操控蛇的頭部朝向,?一路拾起觸碰到之物。本文將用Vue實(shí)現(xiàn)這一游戲，感興趣的可以嘗試一下2022-04-04
這篇文章主要介紹了Vue如何監(jiān)聽(tīng)元素寬高變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue移動(dòng)端項(xiàng)目渲染pdf步驟及問(wèn)題小結(jié)
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目渲染pdf步驟,vue-pdf的插件在使用的過(guò)程中是連連踩坑的，基本遇到3個(gè)問(wèn)題，分別在文中給大家詳細(xì)介紹，需要的朋友可以參考下2022-08-08
使用Element進(jìn)行前端開(kāi)發(fā)的詳細(xì)圖文教程
眾所周知Element是一套Vue.js后臺(tái)組件庫(kù),它能夠幫助你更輕松更快速地開(kāi)發(fā)后臺(tái)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于使用Element進(jìn)行前端開(kāi)發(fā)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
最近學(xué)習(xí)了hooks,特地寫(xiě)一篇文章加深一下印象,下面這篇文章主要給大家介紹了關(guān)于vue3?hook自動(dòng)導(dǎo)入原理及使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
安裝vue3開(kāi)發(fā)者工具但控制臺(tái)沒(méi)有顯示出vue選項(xiàng)的解決
這篇文章主要介紹了安裝vue3開(kāi)發(fā)者工具但控制臺(tái)沒(méi)有顯示出vue選項(xiàng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue路由組件的緩存keep-alive和include屬性的具體使用
：瀏覽器頁(yè)面在進(jìn)行切換時(shí),原有的路由組件會(huì)被銷毀,通過(guò)緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下2023-11-11
Vue使用extend動(dòng)態(tài)創(chuàng)建組件的實(shí)現(xiàn)
本文主要介紹了Vue使用extend動(dòng)態(tài)創(chuàng)建組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue?3.0?使用ref獲取dom元素,包括vue2.x獲取dom和vue3.0獲取單個(gè)dom，通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法，總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路2022-11-11