vue3面試題


1、vue3的新特性
   答:
1、響應系統的變動
由原來的Object.defineProperty 的getter 和 setter,改變成為了ES2015 Proxy 作為其觀察機制。
Proxy的優勢:消除了以前存在的警告,使速度加倍,並節省了一半的內存開銷。
2、虛擬DOM重寫(Virtual DOM Rewrite)
虛擬 DOM 從頭開始重寫,我們可以期待更多的編譯時提示來減少運行時開銷。重寫將包括更有效的代碼來創建虛擬節點。
3、組件渲染的優化(優化插槽生成)
Vue2當中在父組件渲染同時,子組件也會渲染。 Vue3就可以單獨渲染父組件、子組件。
4、靜態樹提升(Static Tree Hoisting)
使用靜態樹提升,這意味着 Vue 3 的編譯器將能夠檢測到什么是靜態組件,然后將其提升,從而降低了渲染成本。它將能夠跳過未整個樹結構打補丁的過程。
 
靜態樹提升(.png
5、靜態屬性提升(Static Props Hoisting)
此外,我們可以期待靜態屬性提升,其中 Vue 3 將跳過不會改變節點的打補丁過程。
總體來說:1. 更快 2. 更小 3. 更容易維護 4. 更加友好 5. 更容易使用
 
2.vue3對比vue2有哪些不同?
3、Proxy 相比於 defineProperty 的優勢
Object.defineProperty() 的問題主要有三個:
  • 不能監聽數組的變化
  • 必須深層遍歷嵌套的對象
  • 必須遍歷對象的每個屬性
Proxy 在 ES2015 規范中被正式加入,它有以下幾個特點:
  • 針對對象:針對整個對象,而不是對象的某個屬性,所以也就不需要對 keys 進行遍歷。這解決了上述 Object.defineProperty() 第二個問題

    *  支持數組:Proxy 不需要對數組的方法進行重載,省去了眾多 hack,減少代碼量等於減少了維護成本,而且標准的就是最好的。

除了上述兩點之外,Proxy 還擁有以下優勢:
  • Proxy 的第二個參數可以有 13 種攔截方法,這比起 Object.defineProperty() 要更加豐富
  • Proxy 作為新標准受到瀏覽器廠商的重點關注和性能優化,相比之下 Object.defineProperty() 是一個已有的老方法。
4、vue2為什么不使用proxy?
 答: 兼容性
5、vue3性能比vue2好的原因?
 答:1.diff算法優化
        2.靜態提升hoistStatic
        3.事件偵聽器緩存 cacheHandles
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM