《Design Principles of Vue 3.0 by Evan You - Vue 3.0 設計原理》觀看筆記

視頻地址：Design Principles of Vue 3.0 by Evan You or Design Principles of Vue 3.0

簡介

視頻主要介紹 Vue 3.0 設計背後的意圖。

Vue 但願儘量知足不一樣用戶羣體的不一樣需求，但願提供用戶低門檻、易用、靈活、高可擴展、功能強大、體積感人的框架，也但願框架自己易維護。設計 Vue 3.0 時，框架開發者時時刻刻面臨着在這些需求間進行取捨，求得平衡。

Approachability vs. Scalability

兼顧低門檻與可擴展，以知足非專業前端工程師的建站需求及建立高複雜度項目的需求。

• CDN build & Vue CLI

  • CDN 支持迅速開始一個項目
  • Vue CLI 提供方便全面的項目管理
• Options API & Composition API
  開放一些內部 API ，提供更爲靈活的代碼組織方式與邏輯複用能力，提供 TypeScript 支持。（看後面）

TypeScript vs. JavaScript

使用 TypeScript：

優勢：

• 提供基於 IDE 的代碼補全與類型信息功能
• 代碼調整時，基於 IDE 的代碼校驗，能夠更爲全面地完成調整

缺點：

• 須要學習 TypeScript 相關知識
• 短時間來看，開發效率會下降，須要考慮類型設計定義等，長期看，利大於弊

在 Vue 3.0 中，不強制要求用戶使用 TypeScript，TypeScript 用戶和 JavaScript 用戶都能從 IDE 插件提供的功能中獲益。

Template vs. JSX

Vue 3.0 但願成爲一個包容性的框架，適用於任何想用 Vue 的用戶。

開發者能夠選擇本身喜歡的方式組織代碼。但 Template 將有利於 Virtual DOM 的性能優化。

每次視圖更新，必須遍歷整個 Virtual DOM 樹，找到變化的 node ，這其實也是某種意義上的暴力髒檢查。

Template 是具備語法約束模板字符串，比起 JSX 或渲染函數，更有利於對其進行某些分析。

在 Vue 3.0 中，將構建 Block Tree 來優化上述問題：

• 基於結構化的指令（如 v-for v-if），將 Template 分爲一個又一個的 blocks
• 在每一個 block 中，node 相對結構是徹底靜態的
• 每一個 block 內只須要一個單層數組來追蹤動態節點

  

舉個栗子，有結構以下，對於外層 block ，它只有一個動態結點即 v-if 結點。對於內層 block ，只有 message span 可能動態變化。

原來各層都有多個結點，層級也不止兩層。通過優化，極大的減小了 Diff 時遞歸層級與迭代深度。更新性能將取決於動態內容的數量，而不是整個 template 的體積。

垃圾回收是 Vue 重要的性能殺手之一，這個優化也極大地減輕了垃圾回收的壓力。

在以前的處理中，每次 render ，都會爲全部結點，包括靜態結點，從新建立 Virtual DOM node ，這實際上是很浪費的。優化後，每次 render 只須要複用以前的對象，而無需從新建立。

Power vs. Size

在 Vue 3.0 中：

• 調整大部分的 Global APIs 和 內部 helpers 以 ES modules 形式導出供外部引入，使其可被 tree-shaking
• 編譯器也會將 template 編譯成可被 tree-shaking 的代碼 （例如，使用到了 v-model="string" ，將自動引入 vModelText 。在線體驗 DEMO）

Framework Coherence vs. Low-level Flexibility

以 React 和 Angular 舉例， Angular 試圖作的更多，而 React 試圖作的更少。（並非說他們中誰的設計很差，這只是框架設計的不一樣選擇）

此處以 small scope 代指 React 這類框架 ，以 big scope 代指 Angular 這類框架。

Small Scope 優勢：

• 門檻低，更少的概念須要入手
• 更靈活，同一個問題有更多的解決方案，這也造就了活躍的生態系統，但也增大了用戶挑選方案時的難度
• 更小的維度面，使得團隊能夠專一探索新 ideas

Small Scope 缺點：

• 當用戶須要解決複雜問題時，基於這些簡單的概念，須要作更多的探索工做
• 隨着時間推移，最佳實踐天然而然地出現，併成爲一種半必須的技能，但這些最佳實踐，一般不會被官方文檔化

因此，這也是一種權衡，生態發展太快，會致使生態碎片化，增長用戶的開發成本，提升用戶的流失率。

Large Scope 優勢：

• 大部分常見問題都能用內建抽象解決
• 集中的設計流程保證了生態系統的一致性

Large Scope 缺點：

• 更高的前期學習障礙
• 若是內建解決方案不適用某個場景，解決問題時可能變得僵化
• 較大的維護面，致使引入重大新特性時成本更高

而 Vue 則是在二者間，作了一個取捨平衡。在此稱其爲 "Progressive" Scope。

• 一種容許用戶以一個漸進的方式有選擇地引入特性的分層設計
• 低門檻
• 將常見問題的解決方案官方文檔化

在 Vue 3.0 中：

• 保持和 Vue 2 相同連貫的體驗
  Router 、 Vuex & test-utils 將分別更新以符合此願景。
  得益於 tree-shaking 和 Composition APIs ，部分解決方案能獲得簡化，複用更多邏輯。
  devtools 對 Vuex 狀態的追蹤也將更爲強大。

• 開放更多的底層能力

  • 例如支持自定義 renderer 、 compiler APIs 等。這些在 Vue 2 中其實也支持，可是未在文檔中正式將其做爲一等 APIs ，也未給出合適的方式去使用他們。
    這些能力，能夠實如今 iOS 、 Android 等原生設備上渲染原生視圖，甚至能夠實現命令行的渲染。它能夠在 nodejs 中運行，不要求必定要運行在瀏覽器中。
  • 開放 compiler pipeline 中更多的底層能力如 parse transform generate APIs 等。供外部工具，如 prettier 、 ESLint 插件等，使用。這樣他們不用作相似於模板解析等的重複工做。