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ù)性
