[fed-task-03-05]Vue.js 3.0 Composition API 及 3.0 原理剖析

簡答題

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

Vue 3.0 性能提高：

（1）響應式系統升級

• Vue.js 2.x 中響應式系統的核心是 Object.defineProperty

• Vue.js 3.0 中使用 Proxy 對象重寫了響應式系統

  • 能夠監聽動態新增的屬性
  • 能夠監聽刪除的屬性
  • 能夠監聽數組的索引和 length 屬性

（2）編譯優化

• Vue.js 2.x 中經過標記靜態根節點，優化 diff 過程

• Vue.js 3.0 中標記和提高全部的靜態節點，diff 的時候只須要對比動態節點內容

  • Fragments 片斷，模板中能夠直接放文本內容或同級標籤(升級 vetur 插件)
  • 靜態節點提高到 render 函數外部，只在初始化時執行一次，再次render無需再次執行
  • Patch flag，標記動態節點（記錄節點內容、節點屬性），diff時跳過靜態根節點 只需關心動態節點內容
  • 緩存事件處理函數，減小了沒必要要的更新操做

（3）源碼體積的優化

• Vue.js 3.0 中移除了一些不經常使用的 API

  • 例如：inline-template / filter 等
• Tree-shaking

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

Options Api

• 包含一個描述組件選項（props、data、methods 等）的對象
• Options Api 開發複雜組件，同一個功能邏輯的代碼被拆分到不一樣選項

Composition Api

• 提供了一種基於函數的API，讓咱們能夠更靈活、更合理的組織組件的邏輯和代碼結構
• 同一功能的代碼不須要拆分，有利於對代碼的提取和重用

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

Proxy 的優勢：

• Proxy 除了有 set 和 get 監聽以外，還有其餘對於對象的監聽回調，能夠監聽動態新增的屬性、監聽刪除的屬性。has deleteProperty ownKeys apply 等等
• Proxy 更好的支持數組對象的監視監聽，能夠監聽數組的索引和 length 屬性
• Proxy 是以非侵入的方式監管了對象的讀寫，不會修改原對象

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

Vue.js 3.0 中標記和提高全部的靜態節點，diff 的時候只須要對比動態節點內容

• Fragments 片斷，模板中能夠直接放文本內容或同級標籤(vscode中要升級 vetur 插件)
• 靜態節點提高到 render 函數外部，只在初始化時執行一次，再次render無需再次執行
• Patch flag，標記動態節點（記錄節點內容、節點屬性），diff時跳過靜態根節點 只需關心動態節點內容
• 緩存事件處理函數，減小了沒必要要的更新操做

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

• 使用 Proxy 對象實現屬性監聽，初始化時不須要遍歷全部屬性對其 defineProperty
• 多屬性嵌套，在訪問屬性的過程當中處理下一級屬性（遞歸處理）
• 默認監聽動態添加的屬性
• 默認監聽屬性的刪除操做
• 默認監聽數組索引和 length 屬性的修改操做
• 能夠做爲單獨的模塊使用

核心方法

• reactive/ref/toRefs/computed
• effect (watch函數內部使用的底層函數)
• track 收集依賴的函數
• trigger 觸發更新的函數