欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3對比Vue2的優(yōu)點總結

 更新時間:2021年06月01日 11:50:09   作者:小蟬兒  
vue3解決了vue2的一些缺陷與弊端,學習新的技術是很有必要的,本文總結了一些vue3的優(yōu)點,希望各位能盡快轉入vue3的使用中

1.為什么要有vue3

我們使用vue2常常會遇到一些體驗不太好的地方,比如:

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

vue3的出現就是為了解決vue2的弊端,其composition API很好的解決了邏輯復用的問題,而且vue3源碼就是用ts寫的,對ts的支持非常好。我們在開發(fā)項目過程中可以使用ts的加持,使代碼更加健壯。

2.vue3的優(yōu)點

  1. vue3支持vue2的大多數特性,實現對vue2的兼容
  2. vue3對比vue2具有明顯的性能提升
    1. 打包大小減少41%
    2. 初次渲染快55%,更新快133%
    3. 內存使用減少54%
  3. vue3具有的composition API實現邏輯模塊化和重用
  4. 增加了新特性,如Teleport組件,全局API的修改和優(yōu)化等

3.響應式原理的不同

Vue2.x實現雙向數據綁定原理,是通過es5的 Object.defineProperty,根據具體的key去讀取和修改。其中的setter方法來實現數據劫持的,getter實現數據的修改。但是必須先知道想要攔截和修改的key是什么,所以vue2對于新增的屬性無能為力,比如無法監(jiān)聽屬性的添加和刪除、數組索引和長度的變更,vue2的解決方法是使用Vue.set(object, propertyName, value) 等方法向嵌套對象添加響應式。

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

4.生命周期的不同

beforeCreate -> 請使用 setup()

created -> 請使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

如果要想在頁面中使用生命周期函數,以往vue2的操作是直接在頁面中寫入生命周期,而vue3是需要去引用的,這就是為什么3能夠將代碼壓縮到更低的原因

5.默認項目目錄結構的不同

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

6.vue3對全局API的優(yōu)化

在 Vue3 中,全局和內部 API 都經過了重構,并考慮到了 tree-shaking 的支持。因此,全局 API現在只能作為 ES 模塊構建的命名導出進行訪問。

import { nextTick } from 'vue'
nextTick(() => {
  // 一些和DOM有關的東西
})

入口文件

// 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實例
app.config.xx=xx  // 在實例上修改配置,不會發(fā)生沖突
app.use(...)
app.mixin(...)
app.mount('#app')


7.使用Proxy替代了defineProperty

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

Object.defineProperty() 的問題主要有三個:

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

Proxy 在 ES2015 規(guī)范中被正式加入,它有以下幾個特點:

  • 針對對象:針對整個對象,而不是對象的某個屬性,所以也就不需要對 keys 進行遍歷。這解決了上述 Object.defineProperty() 第二個問題
  • 支持數組:Proxy 不需要對數組的方法進行重載,省去了眾多 hack,減少代碼量等于減少了維護成本,而且標準的就是最好的。

除了上述兩點之外,Proxy 還擁有以下優(yōu)勢:

  • Proxy 的第二個參數可以有 13 種攔截方法,這比起 Object.defineProperty() 要更加豐富
  • Proxy 作為新標準受到瀏覽器廠商的重點關注和性能優(yōu)化,相比之下 Object.defineProperty() 是一個已有的老方法。

8.更多資料

vue3源碼
vue3官網

以上就是Vue3對比Vue2的優(yōu)點總結的詳細內容,更多關于Vue3對比Vue2的優(yōu)點的資料請關注腳本之家其它相關文章!

相關文章

  • vue3中如何用threejs畫一些簡單的幾何體

    vue3中如何用threejs畫一些簡單的幾何體

    最近學習threejs有些時間了,就想著著手做些東西,下面這篇文章主要給大家介紹了關于vue3中如何用threejs畫一些簡單的幾何體的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-03-03
  • Vue與Axios的傳參方式實例詳解

    Vue與Axios的傳參方式實例詳解

    現在vue項目基本上都是使用axios進行請求操作,下面這篇文章主要給大家介紹了關于Vue與Axios的傳參方式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • vue+echarts+datav大屏數據展示及實現中國地圖省市縣下鉆功能

    vue+echarts+datav大屏數據展示及實現中國地圖省市縣下鉆功能

    這篇文章主要介紹了vue+echarts+datav大屏數據展示及實現中國地圖省市縣下鉆,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-11-11
  • Vue+tracking.js 實現前端人臉檢測功能

    Vue+tracking.js 實現前端人臉檢測功能

    這篇文章主要介紹了Vue+tracking.js 實現前端人臉檢測功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-04-04
  • 全面介紹vue 全家桶和項目實例

    全面介紹vue 全家桶和項目實例

    這篇文章主要介紹了全面介紹vue 全家桶和項目實例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • Vue 2.0的數據依賴實現原理代碼簡析

    Vue 2.0的數據依賴實現原理代碼簡析

    本篇文章主要介紹了Vue 2.0的數據依賴實現原理代碼簡析,主要從初始化的數據層面上分析了Vue是如何管理依賴來到達數據的動態(tài)響應,有興趣的可以了解一下
    2017-07-07
  • vue css 引入asstes中的圖片無法顯示的四種解決方法

    vue css 引入asstes中的圖片無法顯示的四種解決方法

    這篇文章主要介紹了vue css 引入asstes中的圖片 無法顯示的幾種解決方案,本文給出了四種解決方法,每種方法給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-03
  • vue3使用Element-plus的el-pagination分頁組件時無法顯示中文

    vue3使用Element-plus的el-pagination分頁組件時無法顯示中文

    本文主要介紹了vue3使用Element-plus的el-pagination分頁組件時無法顯示中文,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-12-12
  • vue中rem的配置的方法示例

    vue中rem的配置的方法示例

    這篇文章主要介紹了vue中rem的配置的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue之子組件如何修改父組件的值

    vue之子組件如何修改父組件的值

    這篇文章主要介紹了vue之子組件如何修改父組件的值問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07

最新評論