1.重寫虛擬DOM (Virtual DOM Rewrite)
vue3.0將 vdom 更新性能由與模版整體大小相關提升為與動態內容的數量相關
2.優化插槽生成(Optimized Slots Generation)
在當前的 Vue 版本中,當父組件重新渲染時,其子組件也必須重新渲染。 使用 Vue 3 ,可以單獨重新渲染父組件和子組件。
3.靜態樹提升(Static Tree Hoisting)
使用靜態樹提升,這意味着 Vue 3 的編譯器將能夠檢測到什么是靜態組件,然后將其提升,從而降低了渲染成本。它將能夠跳過未整個樹結構打補丁的過程。
4.靜態屬性提升(Static Props Hoisting)
Vue 3 將跳過不會改變節點的打補丁過程。
5.基於 Proxy 的觀察者機制
Object.defineProperty是一個相對比較昂貴的操作,因為它直接操作對象的屬性,顆粒度比較小。將它替換為es6的Proxy,在目標對象之上架了一層攔截,代理的是對象而不是對象的屬性。這樣可以將原本對對象屬性的操作變為對整個對象的操作,顆粒度變大。
javascript引擎在解析的時候希望對象的結構越穩定越好,如果對象一直在變,可優化性降低,proxy不需要對原始對象做太多操作。
6.使 Vue 更小(Tree Shaking)
Vue已經非常小了,在運行時(runtime)壓縮后大約 20kb 。 但我們可以期待它會變得更加小,新的核心運行時壓縮后大概 10kb 。 這將在很大程度上通過消除不使用的庫(也稱為Tree Shaking)來實現。 例如,如果您沒有使用 過渡(transition)元素,則不會包含它。