Vue兩個版本的區(qū)別和使用方法(更深層次了解)
在我們使用 vue時,我們可以引用兩個不同版本的 Vue,分別是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它們的區(qū)別是什么呢,今天我們就來分析下這兩個不同版本之間的區(qū)別。
1、文件名
2、文件大小
完整版:同時包含編譯器和運(yùn)行時的版本。
編譯器:用來將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼。
而非完整版不包含編譯器,體積約比完整版小 30%。
3、視圖
完整版
視圖寫在 HTML里或者 template選項(xiàng)里,由于有 compiler(編譯器)的存在,完整版運(yùn)行時:用來創(chuàng)建 Vue 實(shí)例、渲染并處理虛擬 DOM 等的代碼?;旧暇褪浅ゾ幾g器的其它一切。
非完整版
完整版運(yùn)行時:當(dāng)使用 vue-loader 或 vueify 的時候,*.vue 文件內(nèi)部的模板會在構(gòu)建時預(yù)編譯成 JavaScript。你在最終打好的包里實(shí)際上是不需要編譯器的,所以只用運(yùn)行時版本即可。
// 不需要編譯器
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é)
既然這兩者有這么多不同,那我們平時用哪個版本呢?
當(dāng)然是用非完整版了,理由如下:
1.保證用戶體驗(yàn),用戶下載的JS文件體積更小,但只支持h函數(shù)
2.保證開發(fā)體驗(yàn),開發(fā)者可直接在vue文件里寫HTML標(biāo)簽,而不寫 h函數(shù)
3.活讓loader做,vue-loader 會把vue文件里的HTML轉(zhuǎn)為h函數(shù),這樣我不用寫太多麻煩的 h函數(shù)就可做到和完整版一樣的事,還更節(jié)約文件大小,提升用戶體驗(yàn)。
以上所述是小編給大家介紹的Vue兩個版本的區(qū)別和使用方法(更深層次了解),希望對大家有所幫助!
相關(guān)文章
vue前端實(shí)現(xiàn)導(dǎo)出頁面為pdf(分頁導(dǎo)出、不分頁導(dǎo)出及分模塊導(dǎo)出)
在實(shí)際應(yīng)用中可能用戶希望將系統(tǒng)中一個頁面展示的所有數(shù)據(jù)報表,用PDF的文件格式下載下來,以便于其他用途,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)導(dǎo)出頁面為pdf(分頁導(dǎo)出、不分頁導(dǎo)出及分模塊導(dǎo)出)的相關(guān)資料,需要的朋友可以參考下2024-06-06
Vue2.0 axios前后端登陸攔截器(實(shí)例講解)
下面小編就為大家?guī)硪黄猇ue2.0 axios前后端登陸攔截器(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
如何利用vue+element?ui實(shí)現(xiàn)好看的登錄界面
最近做了個最基礎(chǔ)的ElementUI登錄頁,適合新手查看,所以下面這篇文章主要給大家介紹了關(guān)于如何利用vue+element?ui實(shí)現(xiàn)好看的登錄界面的相關(guān)資料,需要的朋友可以參考下2022-05-05

