vue3-0 面試題總結

一、Vue 3.0 性能提升主要是通過哪幾方面體現的？

1. 響應式系統提升

• vue2 在初始化的時候，對 data 中的每個屬性使用 definepropery 調用 getter 和 setter 使之變爲響應式對象。如果屬性值爲對象，還會遞歸調用 defineproperty 使之變爲響應式對象。
• vue3 使用 proxy 對象重寫響應式。proxy 的性能本來比 defineproperty 好，proxy 可以攔截屬性的訪問、賦值、刪除等操作，不需要初始化的時候遍歷所有屬性，另外有多層屬性嵌套的話，只有訪問某個屬性的時候，纔會遞歸處理下一級的屬性。

優勢：
可以監聽動態新增的屬性；
可以監聽刪除的屬性 ；
可以監聽數組的索引和 length 屬性；

2. 編譯優化

• 優化編譯和重寫虛擬 dom，讓首次渲染和更新 dom 性能有更大的提升
  vue2 通過標記靜態根節點, 優化 diff 算法
  vue3 標記和提升所有靜態根節點, diff 的時候只比較動態節點內容

• Fragments, 模板裏面不用創建唯一根節點, 可以直接放同級標籤和文本內容

• 靜態提升

• patch flag, 跳過靜態節點, 直接對比動態節點

• 緩存事件處理函數

3. 源碼體積的優化

• vue3 移除了一些不常用的 api，例如：inline-template、filter 等
• 使用 tree-shaking

二. Vue 3.0 所採用的 Composition Api 與 Vue 2.x 使用的 Options Api 有什麼區別？

Options Api

包含一個描述組件選項（data、methods、props 等）的對象 options；
API 開發複雜組件，同一個功能邏輯的代碼被拆分到不同選項 ；
使用 mixin 重用公用代碼，也有問題：命名衝突，數據來源不清晰；

composition Api

vue3 新增的一組 api，它是基於函數的 api，可以更靈活的組織組件的邏輯。
解決 options api 在大型項目中，options api 不好拆分和重用的問題。

三. Proxy 相對於 Object.defineProperty 有哪些優點？

proxy 的性能本來比 defineproperty 好，proxy 可以攔截屬性的訪問、賦值、刪除等操作，不需要初始化的時候遍歷所有屬性，另外有多層屬性嵌套的話，只有訪問某個屬性的時候，纔會遞歸處理下一級的屬性。

可以監聽數組變化
可以劫持整個對象
操作時不是對原對象操作, 是 new Proxy 返回的一個新對象
可以劫持的操作有 13 種

四. Vue 3.0 在編譯方面有哪些優化？

• vue.js 3.x 中標記和提升所有的靜態節點，diff 的時候只需要對比動態節點內容；
• Fragments（升級 vetur 插件): template 中不需要唯一根節點，可以直接放文本或者同級標籤
• 靜態提升 (hoistStatic), 當使用 hoistStatic 時, 所有靜態的節點都被提升到 render 方法之外. 只會在應用啓動的時候被創建一次, 之後使用只需要應用提取的靜態節點，隨着每次的渲染被不停的複用。
• patch flag, 在動態標籤末尾加上相應的標記, 只能帶 patchFlag 的節點才被認爲是動態的元素, 會被追蹤屬性的修改, 能快速的找到動態節點, 而不用逐個逐層遍歷，提高了虛擬 dom diff 的性能。
• 緩存事件處理函數 cacheHandler, 避免每次觸發都要重新生成全新的 function 去更新之前的函數
• tree shaking 通過搖樹優化核心庫體積, 減少不必要的代碼量

五. Vue.js 3.0 響應式系統的實現原理？

1. reactive

設置對象爲響應式對象。接收一個參數，判斷這參數是否是對象。不是對象則直接返回這個參數，不做響應式處理。
創建攔截器 handerler，設置 get/set/deleteproperty。
get
收集依賴（track）；
如果當前 key 的值是對象，則爲當前 key 的對象創建攔截器 handler, 設置 get/set/deleteProperty；
如果當前的 key 的值不是對象，則返回當前 key 的值。
set
設置的新值和老值不相等時，更新爲新值，並觸發更新（trigger）。
deleteProperty
當前對象有這個 key 的時候，刪除這個 key 並觸發更新（trigger）。

2. effect

接收一個函數作爲參數。作用是：訪問響應式對象屬性時去收集依賴

3. track

接收兩個參數：target 和 key
－如果沒有 activeEffect，則說明沒有創建 effect 依賴
－如果有 activeEffect，則去判斷 WeakMap 集合中是否有 target 屬性
－WeakMap 集合中沒有 target 屬性，則 set(target, (depsMap = new Map()))
－WeakMap 集合中有 target 屬性，則判斷 target 屬性的 map 值的 depsMap 中是否有 key 屬性
－depsMap 中沒有 key 屬性，則 set(key, (dep = new Set()))
－depsMap 中有 key 屬性，則添加這個 activeEffect

４.trigger

判斷 WeakMap 中是否有 target 屬性，WeakMap 中有 target 屬性，則判斷 target 屬性的 map 值中是否有 key 屬性，有的話循環觸發收集的 effect()。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://blog.csdn.net/weixin_40599109/article/details/110938941