Vue 十年啦?。?！

尤雨溪大佬開講，Vue 十年啦?。?！從一開始的一個視圖層工具，一步一步走到現(xiàn)在，成為一個擁有全流程生態(tài)的頂級前端框架。

圖片

圖片

回顧 Vue3.4 的特性

接著回顧了Vue3.4的亮點：

• 重構(gòu)了模板解析器， 主要是不再依賴于正則表達式，而是使用了 HTML Parser 中的狀態(tài)機來進行解析，使得模板解析的速度至少提升了兩倍。
• 重構(gòu)了響應(yīng)式的邏輯， 使得計算屬性更加高效快速，提升了 watchEffect 的效率，如果計算結(jié)果不變，那么 watchEffect 不會被重新觸發(fā)。
• defeinModel `穩(wěn)定版推出， 開發(fā)者可以直接使用，因為它已經(jīng)正式成為 Vue3.4 的 API 了。
• v-bind 同名簡寫， 比如<img :id="id" :src="src" :alt="alt"> 可以簡寫為 <img :id :src :alt>。

圖片

未來 Vue3.5 的新特性

接下來揭示了未來 Vue3.5 將會包含的新特性，Vue3.5 主要會做一些框架底層的優(yōu)化：

• 響應(yīng)式邏輯上的提升， 調(diào)度任務(wù)中使用位運算去優(yōu)化任務(wù)隊列，這一項優(yōu)化原本是在無虛擬DOM版本 Vapor 中的，現(xiàn)在直接移植到 Vue3.5 中，通過這項優(yōu)化，內(nèi)存使用率提升 56%。
• 響應(yīng)式邏輯上的提升， 優(yōu)化了大數(shù)組的響應(yīng)式性能，可獲得十倍性能收益。
• @vue/reactivity 提供 readArray 方法供開發(fā)者使用， 這是一個高性能的處理數(shù)組響應(yīng)式的方法。
• 優(yōu)化了 SSR 服務(wù)端渲染的一些特性。

圖片

Vue Vapor（無虛擬 DOM 的 Vue）

接下來是 Vue Vapor，Vapor Mode 是 Vue 3 的一項革新特性，其設(shè)計靈感來自于 Solid.js。此特性通過優(yōu)化代碼編譯成更高效的 JavaScript 來提高應(yīng)用程序的性能。

利用 Vapor Mode，開發(fā)者可以完全避免使用 Virtual DOM，這有助于減小應(yīng)用的打包大小。

優(yōu)點包括：

• 性能提升
• 更低的內(nèi)存需求
• 更精簡的運行時代碼

由于 Solid.js 和 Vue 在響應(yīng)式系統(tǒng)方面的設(shè)計相似，均采用基于讀取操作的自動追蹤代理（Proxies），Vue 能夠采用與 Solid.js 相似的編譯策略。

關(guān)于它的具體解析請看我這篇文章：

圖片

圖片

Rolldown

Vite 在新版本中可能會使用 Rolldown 來進行打包，它是一個由 Rust 開發(fā)的打包工具，你可以把它當做是一個 Rust 版本的 Rollup，目前已經(jīng)兼容 Vite/Rollup 一半的插件，速度比 esbuild 更快！速度是 esbuild 的 1.2-1.5 倍！！

圖片

圖片

Rollup 底層依賴了一個叫 OXC 的工具，OXC 是一個由 Rust 編寫的高性能 JS 解析器

圖片