Vue3的新特性

RFC機(jī)制

Vue3 的一個(gè)新特性和代碼無(wú)關(guān),而是 Vue 團(tuán)隊(duì)的開(kāi)發(fā)的工作方式
Vue 的新語(yǔ)法或者新功能的討論,都會(huì)在 github 中公開(kāi)征求意見(jiàn),邀請(qǐng)社區(qū)所有的人一起討論,RFC的引入,讓 Vue 的生態(tài)更加開(kāi)放。

響應(yīng)式系統(tǒng)

vue2的響應(yīng)式機(jī)制是基于 Object.defineProperty 這個(gè) API 來(lái)實(shí)現(xiàn)的,defineProperty是攔截具體的某個(gè)屬性
vue3 中的響應(yīng)式基于 Proxy,proxy 才是真正的代理

Object.defineProperty和 proxy 實(shí)現(xiàn)響應(yīng)式的區(qū)別

(1)defineProperty 是攔截具體某個(gè)屬性,proxy 是真正的代理
(2)defineProperty 對(duì)不存在的屬性無(wú)法攔截,所以在vue2中的所有數(shù)據(jù)都必須要在data中聲明,當(dāng)數(shù)據(jù)類型是數(shù)組時(shí),并不會(huì)改變指向,所以不能攔截?cái)?shù)組長(zhǎng)度的修改,需要額外的$set 等API
(3) proxy 可以監(jiān)聽(tīng)更多的數(shù)據(jù)類型,比如 set map 這些 vue2做不到

自定義渲染器

(1)vue2中的所有模塊都是揉在一起的,導(dǎo)致不好擴(kuò)展的問(wèn)題
(2)Vue3 中選擇拆包的方式,使用流行的 monorepo 的管理方式,響應(yīng)式、編譯和運(yùn)行時(shí)都全部獨(dú)立
(3)vue3 的組織架構(gòu)中,響應(yīng)式獨(dú)立了出來(lái),vue2的響應(yīng)式只服務(wù)于 vue, vue3 的響應(yīng)式和 vue 解耦了,可以在node和react 使用它的響應(yīng)式,甚至在你想使用 vue3開(kāi)發(fā)小程序、小游戲等,不用全部fork vue 的代碼,只需要實(shí)現(xiàn)平臺(tái)的渲染邏輯就可以

全部模塊使用 TS 重構(gòu)

(1)類型系統(tǒng)帶來(lái)了更方便的提示
(2)類型系統(tǒng)讓代碼更加健壯

Cmposition API

(1) 所有的 API 都是 import 引入的,用到的功能都會(huì) import 進(jìn)來(lái),對(duì)于 Tree-shaking 很友好
(2) 代碼書寫過(guò)程中,不再上下反復(fù)橫跳,可以把一個(gè)功能模塊的 methods data 等放在一塊書寫,維護(hù)更輕松。
(3)代碼方便復(fù)用,可以把一個(gè)功能所有的 methods data 封裝在一個(gè)獨(dú)立的函數(shù)中,復(fù)用代碼肥腸容易

新的組件

vue3 還內(nèi)置了 Fragment、Teleport、Suspense 三個(gè)新組件
Fragment:不在要求有一個(gè)唯一的根節(jié)點(diǎn),清除了很多無(wú)用的占位div
Teleport: 允許在組件渲染在別的元素內(nèi),主要是在開(kāi)發(fā)彈窗組件的時(shí)候很有用
Sunpense:異步組件:更方便開(kāi)發(fā)有異步請(qǐng)求的組件

新一代的工程化工具 Vite

vite 主要是提升開(kāi)發(fā)的體驗(yàn)
(1)傳統(tǒng)的 webpack 打包,根據(jù)你的import 依賴的邏輯,形成一個(gè)依賴圖,調(diào)用對(duì)應(yīng)的處理工具,把整個(gè)項(xiàng)目全部打包后,放在內(nèi)存中再啟動(dòng)調(diào)試
(2)vite 是在調(diào)試環(huán)境下,不需要全部的于大寶,只是把你首頁(yè)以來(lái)的文件,依次通過(guò)網(wǎng)絡(luò)的請(qǐng)求去獲取,整個(gè)開(kāi)發(fā)體驗(yàn)得到巨大提升

總結(jié)

(1) 新的 RFC 的機(jī)制讓所有人都可以參與 Vue的新語(yǔ)法的討論
(2) 工程化的vite 工具帶來(lái)了更絲滑的調(diào)試體驗(yàn)
(3) 對(duì)于產(chǎn)品的最終效果來(lái)看,vue3的性能更高、體積更小
(4) 對(duì)于普通開(kāi)發(fā)者來(lái)說(shuō),composition Api 的組合語(yǔ)法更好的組織代碼的形式,全新的響應(yīng)式系統(tǒng)基于 proxy,可以獨(dú)立使用
(5)內(nèi)置了新的組件
(6)對(duì)于vue的二次開(kāi)發(fā)來(lái)說(shuō),自定義的渲染器讓開(kāi)發(fā)跨端應(yīng)用時(shí)更加得心應(yīng)手
(7)對(duì)于 Vue 的源碼維護(hù)者,全部模塊使用 TS重構(gòu),帶來(lái)更好的可維護(hù)性


截屏2023-09-20 18.32.04.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 快速開(kāi)始 通過(guò) CDN: 通過(guò) Codepen[https://codepen.io/yyx990803/pen/...
    AAA前端閱讀 787評(píng)論 0 1
  • Vue3的變化 官網(wǎng)地址: https://v3.cn.vuejs.org/guide/migration/int...
    JiaoMengYuan閱讀 44,009評(píng)論 0 38
  • 一、檢測(cè)機(jī)制 vue2中基于Object.defineProperty的observer實(shí)現(xiàn),vue3中則基于Pr...
    周五_xy閱讀 1,931評(píng)論 0 6
  • # Vue3的改進(jìn)及特點(diǎn) 1.性能的提升:打包大小減少 41%,初次渲染快 55%,更新快 133%,內(nèi)存使用減少...
    華爾街的主導(dǎo)曲閱讀 20,267評(píng)論 1 3
  • 1、響應(yīng)系統(tǒng)的變動(dòng) 由原來(lái)的Object.defineProperty 的getter 和 setter,改變成為...
    老Daaa閱讀 4,977評(píng)論 0 3

友情鏈接更多精彩內(nèi)容