Vue3對(duì)比Vue2的優(yōu)點(diǎn)總結(jié)

更新時(shí)間：2021年06月01日 11:50:09 作者：小蟬兒

vue3解決了vue2的一些缺陷與弊端，學(xué)習(xí)新的技術(shù)是很有必要的，本文總結(jié)了一些vue3的優(yōu)點(diǎn)，希望各位能盡快轉(zhuǎn)入vue3的使用中

1.為什么要有vue3

我們使用vue2常常會(huì)遇到一些體驗(yàn)不太好的地方，比如：

隨著功能的增長(zhǎng)，需求的增加，復(fù)雜組件的代碼越來越難以維護(hù)，邏輯混亂，雖然vue2也有一些復(fù)用的方法，但是都存在一定的弊端，比如我們常常用的Mixin,特別容易發(fā)生命名沖突，暴露出來的變量意圖不是很明顯，重用到其他組件容易沖突。
vue2對(duì)于typeScript的支持非常有限，沒有考慮到ts的集成。

vue3的出現(xiàn)就是為了解決vue2的弊端，其composition API很好的解決了邏輯復(fù)用的問題，而且vue3源碼就是用ts寫的，對(duì)ts的支持非常好。我們?cè)陂_發(fā)項(xiàng)目過程中可以使用ts的加持，使代碼更加健壯。

2.vue3的優(yōu)點(diǎn)

vue3支持vue2的大多數(shù)特性，實(shí)現(xiàn)對(duì)vue2的兼容
vue3對(duì)比vue2具有明顯的性能提升
1. 打包大小減少41%
2. 初次渲染快55%，更新快133%
3. 內(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對(duì)于新增的屬性無能為力，比如無法監(jiān)聽屬性的添加和刪除、數(shù)組索引和長(zhǎng)度的變更，vue2的解決方法是使用Vue.set(object, propertyName, value) 等方法向嵌套對(duì)象添加響應(yīng)式。

Vue3.x使用了ES2015的更快的原生proxy 替代 Object.defineProperty。Proxy可以理解成，在對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問進(jìn)行過濾和改寫。Proxy可以直接監(jiān)聽對(duì)象而非屬性，并返回一個(gè)新對(duì)象，具有更好的響應(yīng)式支持

4.生命周期的不同

beforeCreate -> 請(qǐng)使用 setup()

created -> 請(qǐng)使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

如果要想在頁(yè)面中使用生命周期函數(shù)，以往vue2的操作是直接在頁(yè)面中寫入生命周期，而vue3是需要去引用的，這就是為什么3能夠?qū)⒋a壓縮到更低的原因

5.默認(rèn)項(xiàng)目目錄結(jié)構(gòu)的不同

vue3移除了配置文件目錄，config 和 build 文件夾，移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動(dòng)到 public 中，在 src 文件夾中新增了 views 文件夾，用于分類視圖組件和公共組件

6.vue3對(duì)全局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全局配置的修改，會(huì)修改Vue對(duì)象的屬性
// 在不同的app中，共享一份有著不同配置的Vue對(duì)象，也變得非常困難
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)建一個(gè)app實(shí)例
app.config.xx=xx  // 在實(shí)例上修改配置，不會(huì)發(fā)生沖突
app.use(...)
app.mixin(...)
app.mount('#app')

7.使用Proxy替代了defineProperty

Proxy 相比于 defineProperty 的優(yōu)勢(shì)

Object.defineProperty() 的問題主要有三個(gè)：

不能監(jiān)聽數(shù)組的變化
必須遍歷對(duì)象的每個(gè)屬性
必須深層遍歷嵌套的對(duì)象

Proxy 在 ES2015 規(guī)范中被正式加入，它有以下幾個(gè)特點(diǎn)：

針對(duì)對(duì)象：針對(duì)整個(gè)對(duì)象，而不是對(duì)象的某個(gè)屬性，所以也就不需要對(duì) keys 進(jìn)行遍歷。這解決了上述 Object.defineProperty() 第二個(gè)問題
支持?jǐn)?shù)組：Proxy 不需要對(duì)數(shù)組的方法進(jìn)行重載，省去了眾多 hack，減少代碼量等于減少了維護(hù)成本，而且標(biāo)準(zhǔn)的就是最好的。

除了上述兩點(diǎn)之外，Proxy 還擁有以下優(yōu)勢(shì)：

Proxy 的第二個(gè)參數(shù)可以有 13 種攔截方法，這比起 Object.defineProperty() 要更加豐富
Proxy 作為新標(biāo)準(zhǔn)受到瀏覽器廠商的重點(diǎn)關(guān)注和性能優(yōu)化，相比之下 Object.defineProperty() 是一個(gè)已有的老方法。