Vue3的新特性

RFC機制

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

響應式系統(tǒng)

vue2的響應式機制是基于 Object.defineProperty 這個 API 來實現(xiàn)的,defineProperty是攔截具體的某個屬性
vue3 中的響應式基于 Proxy,proxy 才是真正的代理

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

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

自定義渲染器

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

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

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

Cmposition API

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

新的組件

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

新一代的工程化工具 Vite

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

總結(jié)

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


截屏2023-09-20 18.32.04.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

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