解鎖 vue3.0 你不得不知道的新東西

現(xiàn)在技術(shù)發(fā)展的太過迅速，一不學(xué)習(xí)就落后，前端也是如此。前端今年最要關(guān)注的就是?Vue3.0?的發(fā)布，現(xiàn)在已經(jīng)進(jìn)入了RC 階段，很快就要發(fā)布?正式版?了。

性能方面

通過更新?runtime-core?與?runtime-dom?，支持了包括?Fragments、Portals與Suspense w/ async setup()等（似乎有點越來越像?react），支持?Composition API?、Options API?和?typings，配合?Proxy?的引入，極大程度上提高了響應(yīng)式的能力。

vue2初始化，所有的數(shù)據(jù)都要走defineProperty；vue3用proxy動態(tài)的決定返回什么，做了攔截，初始工作量減少，組件實例化速度的提升還是很明顯的。

runtime-core?體積壓縮成了約10kb

維護(hù)性

代碼遷移成?TypeScript?（還沒學(xué)的抓緊啦）

編譯器Compiler優(yōu)化，以下借用尤大大的特性更新圖翻譯一下：

• 使用模塊化架構(gòu)
• 優(yōu)化 "Block tree"
• 更激進(jìn)的 static tree hoisting 功能
• 支持 Source map
• 內(nèi)置標(biāo)識符前綴（又名 "stripWith"）
• 內(nèi)置整齊打印功能

編譯優(yōu)化：template compile to render function階段可以借助vue-loader在webpack編譯階段離線完成 那么耗時更多的patch階段優(yōu)化：通過編譯階段對靜態(tài)模版的分析，編譯生成Block Tree,只把綁定數(shù)據(jù)的動態(tài)節(jié)點加入嵌套區(qū)塊數(shù)據(jù)，每個區(qū)塊以數(shù)組追蹤

Composition API

尤大大說以前在2點幾的版本中我們使用?mixin?來混入公用方法或者其它內(nèi)容，這樣做混入的對象來源不明，相同功能代碼陳列雜亂，修改起來上翻下翻，對開發(fā)者造成困擾。

而使用?Composition API，來源明確、相同功能的代碼塊在一起，修改的時候只需要專注一個地方，更易于維護(hù)。

以前我們在代碼里都是使用?this?來訪問屬性，比如?this.foo() this.obj this.$watch，這樣?vue?對外暴露的東西太多，引入第三方組件安全問題無法保障，造成困擾。vue3?之后我們將不再使用?this，api?以模塊的方式引入，函數(shù)的方式使用。

CSS Modules

CSS Modules?是一種?CSS?的模塊化和組合系統(tǒng)。vue-loader?集成?CSS Modules，可以作為模擬?scoped CSS?的替代方案。

先在組件中的?