Vue3對比Vue2的優(yōu)點(diǎn)總結(jié)
1.為什么要有vue3
我們使用vue2常常會遇到一些體驗(yàn)不太好的地方,比如:
- 隨著功能的增長,需求的增加,復(fù)雜組件的代碼越來越難以維護(hù),邏輯混亂,雖然vue2也有一些復(fù)用的方法,但是都存在一定的弊端,比如我們常常用的Mixin,特別容易發(fā)生命名沖突,暴露出來的變量意圖不是很明顯,重用到其他組件容易沖突。
- vue2對于typeScript的支持非常有限,沒有考慮到ts的集成。
vue3的出現(xiàn)就是為了解決vue2的弊端,其composition API很好的解決了邏輯復(fù)用的問題,而且vue3源碼就是用ts寫的,對ts的支持非常好。我們在開發(fā)項(xiàng)目過程中可以使用ts的加持,使代碼更加健壯。
2.vue3的優(yōu)點(diǎn)
- vue3支持vue2的大多數(shù)特性,實(shí)現(xiàn)對vue2的兼容
- vue3對比vue2具有明顯的性能提升
- 打包大小減少41%
- 初次渲染快55%,更新快133%
- 內(nèi)存使用減少54%
- vue3具有的composition API實(shí)現(xiàn)邏輯模塊化和重用
- 增加了新特性,如Teleport組件,全局API的修改和優(yōu)化等
3.響應(yīng)式原理的不同
Vue2.x實(shí)現(xiàn)雙向數(shù)據(jù)綁定原理,是通過es5的 Object.defineProperty,根據(jù)具體的key去讀取和修改。其中的setter方法來實(shí)現(xiàn)數(shù)據(jù)劫持的,getter實(shí)現(xiàn)數(shù)據(jù)的修改。但是必須先知道想要攔截和修改的key是什么,所以vue2對于新增的屬性無能為力,比如無法監(jiān)聽屬性的添加和刪除、數(shù)組索引和長度的變更,vue2的解決方法是使用Vue.set(object, propertyName, value) 等方法向嵌套對象添加響應(yīng)式。
Vue3.x使用了ES2015的更快的原生proxy 替代 Object.defineProperty。Proxy可以理解成,在對象之前架設(shè)一層“攔截”,外界對該對象的訪問,都必須先通過這層攔截,因此提供了一種機(jī)制,可以對外界的訪問進(jìn)行過濾和改寫。Proxy可以直接監(jiān)聽對象而非屬性,并返回一個新對象,具有更好的響應(yīng)式支持
4.生命周期的不同
beforeCreate -> 請使用 setup()
created -> 請使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
如果要想在頁面中使用生命周期函數(shù),以往vue2的操作是直接在頁面中寫入生命周期,而vue3是需要去引用的,這就是為什么3能夠?qū)⒋a壓縮到更低的原因
5.默認(rèn)項(xiàng)目目錄結(jié)構(gòu)的不同
vue3移除了配置文件目錄,config 和 build 文件夾,移除了 static 文件夾,新增 public 文件夾,并且 index.html 移動到 public 中,在 src 文件夾中新增了 views 文件夾,用于分類視圖組件和公共組件
6.vue3對全局API的優(yōu)化
在 Vue3 中,全局和內(nèi)部 API 都經(jīng)過了重構(gòu),并考慮到了 tree-shaking 的支持。因此,全局 API現(xiàn)在只能作為 ES 模塊構(gòu)建的命名導(dǎo)出進(jìn)行訪問。
import { nextTick } from 'vue' nextTick(() => { // 一些和DOM有關(guān)的東西 })
入口文件
// vue2寫法 // vue2全局配置的修改,會修改Vue對象的屬性 // 在不同的app中,共享一份有著不同配置的Vue對象,也變得非常困難 import Vue from 'vue' import App from './App.vue' Vue.config.xx=xx Vue.use(...) Vue.mixin(...) new Vue({ render:h=>h(app) }).$mount('#app') // vue3寫法 import { createApp } from 'vue' import App from './App.vue' const app = createApp(APP) // 創(chuàng)建一個app實(shí)例 app.config.xx=xx // 在實(shí)例上修改配置,不會發(fā)生沖突 app.use(...) app.mixin(...) app.mount('#app')
7.使用Proxy替代了defineProperty
Proxy 相比于 defineProperty 的優(yōu)勢
Object.defineProperty() 的問題主要有三個:
- 不能監(jiān)聽數(shù)組的變化
- 必須遍歷對象的每個屬性
- 必須深層遍歷嵌套的對象
Proxy 在 ES2015 規(guī)范中被正式加入,它有以下幾個特點(diǎn):
- 針對對象:針對整個對象,而不是對象的某個屬性,所以也就不需要對 keys 進(jìn)行遍歷。這解決了上述 Object.defineProperty() 第二個問題
- 支持?jǐn)?shù)組:Proxy 不需要對數(shù)組的方法進(jìn)行重載,省去了眾多 hack,減少代碼量等于減少了維護(hù)成本,而且標(biāo)準(zhǔn)的就是最好的。
除了上述兩點(diǎn)之外,Proxy 還擁有以下優(yōu)勢:
- Proxy 的第二個參數(shù)可以有 13 種攔截方法,這比起 Object.defineProperty() 要更加豐富
- Proxy 作為新標(biāo)準(zhǔn)受到瀏覽器廠商的重點(diǎn)關(guān)注和性能優(yōu)化,相比之下 Object.defineProperty() 是一個已有的老方法。
8.更多資料
以上就是Vue3對比Vue2的優(yōu)點(diǎn)總結(jié)的詳細(xì)內(nèi)容,更多關(guān)于Vue3對比Vue2的優(yōu)點(diǎn)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue+echarts+datav大屏數(shù)據(jù)展示及實(shí)現(xiàn)中國地圖省市縣下鉆功能
這篇文章主要介紹了vue+echarts+datav大屏數(shù)據(jù)展示及實(shí)現(xiàn)中國地圖省市縣下鉆,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11Vue+tracking.js 實(shí)現(xiàn)前端人臉檢測功能
這篇文章主要介紹了Vue+tracking.js 實(shí)現(xiàn)前端人臉檢測功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析,主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達(dá)數(shù)據(jù)的動態(tài)響應(yīng),有興趣的可以了解一下2017-07-07vue css 引入asstes中的圖片無法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無法顯示的幾種解決方案,本文給出了四種解決方法,每種方法給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03vue3使用Element-plus的el-pagination分頁組件時無法顯示中文
本文主要介紹了vue3使用Element-plus的el-pagination分頁組件時無法顯示中文,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12