場景：vue3.0源碼已經(jīng)發(fā)布了半年了，尤雨溪大大最近也頻繁開課更新進展，雖然公司項目里面引入3.0還需要一段時間的沉淀，但是不妨礙我們可以大致了解下3.0的新特性和修改

主要參考的相關(guān)鏈接：

// Composition API詳情：

'https://composition-api.vuejs.org/api.html#advanced-reactivity-apis'?

// monorepo結(jié)構(gòu)介紹

'https://trunkbaseddevelopment.com/monorepos/'?

// 用戶意見收集RFC

'https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md'?

// vue3.0源碼的github地址?

'https://github.com/vuejs/vue-next'?

// 尤雨溪4.21B站直播ppt?

'https://juejin.im/post/5e9f6b3251882573a855cd52'?

// 尤雨溪5.28發(fā)布微博?

'https://increment.com/frontend/making-vue-3/'?

// 尤雨溪6.4直播ppt?

'https://mp.weixin.qq.com/s?__biz=MzA4MDU1MDExMg==&mid=2247483829&idx=1&sn=75ef516c9174cda030db48d4ab5722e3&chksm=9fa3c03aa8d4492c5d49866df093f61aeb3f8484bf6b75ad87a63d207cfdc3d18910fe42702f&token=454539811&lang=zh_CN#rd'?

// 阮一峰的ES6?

'https://es6.ruanyifeng.com/#docs/proxy'

總結(jié)：從6個方面拋出新特性，感興趣的小伙伴自己去找源碼深入～

1、雙向綁定

2.0現(xiàn)有限制：

????1、無法檢測到新的屬性添加/刪除?

????2、無法監(jiān)聽數(shù)組的變化?

????3、需要深度遍歷，浪費內(nèi)存

3.0優(yōu)化：

????1、允許框架攔截對象上的操作?

????2、Proxy默認可以支持數(shù)組?

????3、多層對象嵌套，使用懶代理

【注意：要看這部分源碼，先保證對阮一峰的ES6博客中Proxy、Reflect、Set和Map有一定程度的了解】

核心：主要通過函數(shù)reactive()給對象新增一個Proxy對象監(jiān)聽內(nèi)部的屬性來實現(xiàn)數(shù)據(jù)監(jiān)聽，部分源碼如下

解析：通過observed = new Proxy(target, handle);給每一個傳入的target對象包一個Proxy對象，有操作時觸發(fā)handle方法；

其中let toProxy = new WeakMap()，WeakMap是弱引用，key為對象，用于緩存代理的target，let toRaw = new WeakMap()，用于緩存observed，避免重復(fù)代理；

handle方法中有g(shù)et()和set()，在get()中執(zhí)行track()依賴收集，在set()中執(zhí)行trigger()觸發(fā)更新。

2、虛擬DOM

2.0VDOM性能瓶頸：?

????1、雖然vue能夠保證觸發(fā)更新的組件最小化，但單個組件部分變化需要遍歷該組件的整個vdom樹?

????2、傳統(tǒng)vdom性能跟模版大小正相關(guān)，跟動態(tài)節(jié)點的數(shù)量無關(guān)

3.0優(yōu)化工作?

????1、將AST基于動態(tài)節(jié)點指令（if,for,slot）切割為嵌套的區(qū)塊?

????2、主動檢測模版中的靜態(tài)節(jié)點?

????3、給元素一個追蹤標(biāo)記，無論層級嵌套多深，更新時可以直接遍歷動態(tài)節(jié)點

3.0的新策略將vdom更新性能與模版大小解耦，變?yōu)榕c動態(tài)節(jié)點的數(shù)量相關(guān)，整體比vue2性能提升2～5倍。

3、Tree-Shaking

2.0現(xiàn)有限制： 并不是每個人都使用框架的所有功能，但仍需下載/解析相應(yīng)代碼

3.0優(yōu)化：將大多數(shù)全局API和內(nèi)部組件移至ES模塊導(dǎo)出，tree-shaking更友好

4月份的數(shù)據(jù)顯示，vue2.0的運行時大小是22.5kb，3.0在13.5kb。

4、Composition API

// Composition API詳情：

'https://composition-api.vuejs.org/api.html#advanced-reactivity-apis'

這部分內(nèi)容實在太多，給一個網(wǎng)站大家可以自己去查看～

5、使用TS

整個3.0的源碼都是用ts重構(gòu)的，TypeScript的好處是有類型檢查～

6、內(nèi)部模塊解耦

神奇的monorepo結(jié)構(gòu)

// monorepo結(jié)構(gòu)介紹

'https://trunkbaseddevelopment.com/monorepos/'