vue3 新增的亮點(diǎn)
- Performance 性能優(yōu)化
- Tree-shaking 支持搖樹(shù)優(yōu)化
- Composition API 組合式API
- 新增組件 Fragment Teleport Supense
- 更好的支持ts
- Custom render API 自定義渲染器
性能提升
- 響應(yīng)式性能提升
1.1 diff 方法優(yōu)化
在vue2中蘸炸，數(shù)據(jù)發(fā)生變化時(shí)搭儒，會(huì)生成一個(gè)新的dom樹(shù)，然后和之前的dom樹(shù)進(jìn)行比較馁菜，找到變更的節(jié)點(diǎn)然后更新到真實(shí)的dom上铃岔。在比較的過(guò)程中會(huì)對(duì)沒(méi)有發(fā)生改變的dom也進(jìn)行比較，這樣消耗了一定的時(shí)間智嚷。
在vue3中盏道，在創(chuàng)建虛擬dom時(shí)會(huì)根據(jù)dom的內(nèi)容添加一個(gè)靜態(tài)標(biāo)記，在數(shù)據(jù)發(fā)生變化時(shí)就會(huì)帶著靜態(tài)標(biāo)記的節(jié)點(diǎn)去對(duì)比衅枫，能夠快速找到需要更新的dom朗伶。
1.2 事件偵聽(tīng)器緩存
vue2中 onClick 被認(rèn)為是動(dòng)態(tài)綁定，每次都會(huì)最終它的變化孤钦。但因?yàn)槭峭粋€(gè)函數(shù)偏形，vue3中進(jìn)行了緩存觉鼻。
1.3 ssr渲染
當(dāng)存在大量靜態(tài)內(nèi)容時(shí)，這些內(nèi)容會(huì)被當(dāng)做純字符串推進(jìn)一個(gè) buffer 內(nèi)萨惑，即使存在動(dòng)態(tài)綁定仇矾，也會(huì)通過(guò)模板插值潛入進(jìn)去贮匕，這樣會(huì)比虛擬 DOM 渲染快得多。 - 代碼體積
vue3 移除了一些不常用的 API掏膏，如：inline-template敦锌、filter 等乙墙，使用 tree-shaking生均。
Tree Shaking 搖樹(shù)優(yōu)化疯特，指的就是當(dāng)我們引入一個(gè)模塊的時(shí)候漓雅，不引入這個(gè)模塊的所有代碼朽色，只引入我們需要的代碼。
在 vue2 中葫男，很多函數(shù)都掛載到全局 Vue 對(duì)象上，如：nextTick旺遮、set 函數(shù)等耿眉，雖然我們不常用鱼响，但打包時(shí)只要引入 Vue 這些全局函數(shù)會(huì)打包進(jìn) bundle 中丈积。而 vue3 中，引入tree-shaking铛纬，所有的 API 都通過(guò) ES6 模塊化的方式引入饺鹃，這樣就能夠讓 webpack 或 rollup 等打包工具在打包時(shí)，就會(huì)自動(dòng)對(duì)沒(méi)有用到的 API 進(jìn)行剔除镊屎，最小化 bundle 體積缝驳。 - 編譯優(yōu)化
3.1 靜態(tài)提升
在vue2中归苍，dom更新時(shí)無(wú)論元素是否需要參與更新拼弃，都會(huì)重新創(chuàng)建再渲染摇展。vue3使用了靜態(tài)提升后吻氧，對(duì)于不參與更新的元素只會(huì)創(chuàng)建一次咏连，在渲染的過(guò)程直接復(fù)用。
3.2 Fragment
模板內(nèi)不用再創(chuàng)建一個(gè)唯一根節(jié)點(diǎn)振惰，可以直接放同級(jí)標(biāo)簽和內(nèi)容骑晶。就相當(dāng)于少了一個(gè)節(jié)點(diǎn)嵌套渲染桶蛔。
選項(xiàng)式 api VS 組合式 api
在 vue2 中采用選項(xiàng)式 api 羽圃，會(huì)在 vue 文件的 data抖剿、methods斩郎、watch缩宜、computed 中定義屬性和方法锻煌，共同處理頁(yè)面邏輯，多個(gè)功能相互交叉匣沼，纏繞在一起释涛，代碼過(guò)于分散唇撬。
而 vue3 新增了組合式 api 窖认，一個(gè)功能模塊代碼會(huì)集中到一起耀态，實(shí)現(xiàn)高內(nèi)聚首装，低耦合仙逻。提高代碼的可讀性和可維護(hù)性系奉，基于函數(shù)組合的 api 更好地重用邏輯代碼
proxy 相對(duì) Object.defineProperty 優(yōu)點(diǎn)有哪些缺亮？
vue2 利用 Object.defineProperty 來(lái)劫持 data 數(shù)據(jù)的 getter 和 setter 操作萌踱，使得 data 在被訪問(wèn)或賦值時(shí)并鸵，動(dòng)態(tài)更新綁定的 template 模板园担。而 Object.defineProperty 必須遍歷所有的預(yù)值才能劫持每一個(gè)屬性弯汰，這一缺點(diǎn)正好能夠被 proxy 解決咏闪。
proxy 相比 Object.defineProperty 優(yōu)點(diǎn)分別為：
代碼的執(zhí)行效果更快织鲸。
proxy 可以直接監(jiān)聽(tīng)對(duì)象而不是它的屬性搂擦。
proxy 可以直接監(jiān)聽(tīng)數(shù)組的每個(gè)元素的變化瀑踢。
proxy 不需要初始化的時(shí)候遍歷所有屬性橱夭，如果有多層嵌套的話棘劣，只訪問(wèn)某個(gè)屬性的時(shí)候茬暇，proxy 能夠快速訪問(wèn)到糙俗，而 Object.defineProperty 還需要遍歷所有屬性巧骚，然后逐級(jí)向下訪問(wèn)劈彪。
proxy 返回的是一個(gè)新對(duì)象粉臊，可以直接操作新對(duì)象而達(dá)到目標(biāo)扼仲。而 Object.defineProperty 操作的是原對(duì)象屠凶，只能遍歷對(duì)象屬性然后對(duì)其直接修改矗愧。
proxy 有 13 種攔截方法夜涕，不限于 apply女器、ownKeys驾胆、deleteProperty 等，而 Object.defineporperty 不具備驳阎。
在 vue2 中搞隐，我們給對(duì)象新增一個(gè)屬性時(shí)，如果新增屬性的值發(fā)生改變的時(shí)候癞季，我們發(fā)現(xiàn)視圖并沒(méi)有更新，因?yàn)樾略鰧傩允菬o(wú)法監(jiān)聽(tīng)到的废睦。同樣的嗜湃，通過(guò)下標(biāo)直接改變數(shù)組，視圖也是無(wú)法更新的刚陡，也是因?yàn)楸O(jiān)聽(tīng)不到歌殃。在 vue3 中新增 proxy 挺份，解決了這些問(wèn)題优训。
更好的 ts 支持
vue2 不適合使用 ts抡医，在于它的 Options API 風(fēng)格忌傻。
options 是一個(gè)簡(jiǎn)單的對(duì)象，而 ts 是一種類(lèi)型系統(tǒng)俘种、面向?qū)ο蟮恼Z(yǔ)法，兩個(gè)不匹配悬包。
vue3 新增了 defineComponent 函數(shù)，使組件在 ts 下，更好的利用參數(shù)類(lèi)型推斷季蚂。如：reactive 和 ref 很具有代表性算谈。
更先進(jìn)的組件
- Fragment
在 vue2 中，每個(gè)模板必須有一個(gè)根節(jié)點(diǎn)，否則就會(huì)報(bào)錯(cuò)鲸匿。
vue3 中可以不需要根節(jié)點(diǎn)，多個(gè)元素或標(biāo)簽可并列存在乔煞。 - Teleport
可以把 teleport 中的內(nèi)容添加到任意的節(jié)點(diǎn)內(nèi)，對(duì)于嵌套較深的組件來(lái)說(shuō)絕對(duì)是一個(gè)福音。 - Supense
允許程序在等待異步組件渲染一些后備的內(nèi)容府怯，可以讓我們創(chuàng)建一個(gè)平滑的用戶體驗(yàn)。
