嚐鮮Vue3之五：源碼結構

目錄

• 嚐鮮Vue3之一：瀏覽器中如何斷點調試Vue3 源碼
• 嚐鮮Vue3之二：最重要的變化CompositionApi
• 嚐鮮Vue3之三：CompositionAPI小結和包裝對象
• 嚐鮮Vue3之四：如何運行Jest單元測試
• 嚐鮮Vue3之五：源碼結構
• 嚐鮮Vue3之六：響應式原理的革新 - Vue二、Vue3實現對比

代碼結構

源碼位置是在package文件件內，實際上源碼主要分爲兩部分，編譯器和運行時環境。

• 編譯器

  • compiler-core 核心編譯邏輯

    • 基本類型解析
    • AST

  • compiler-dom 針對瀏覽器的編譯邏輯

    • v-html
    • v-text
    • v-model
    • v-clock

• 運行時環境

  • runtime-core 運行時核心
    • inject
    • 生命週期
    • watch
    • directive
    • component
  • runtime-dom 運行時針對瀏覽器的邏輯
    • class
    • style
  • runtime-test 測試環境仿真

    主要爲了解決單元測試問題的邏輯 在瀏覽器外完成測試比較方便

• reactivity 響應式邏輯

• template-explorer 模板解析器 能夠這樣運行

  yarn dev template-explorer
  複製代碼

  

  

  而後打開index.html

  

• vue 代碼入口

  整合編譯器和運行時

  

• server-renderer 服務器端渲染（TODO）

• share 公用方法

目錄

• 嚐鮮Vue3之一：瀏覽器中如何斷點調試Vue3 源碼
• 嚐鮮Vue3之二：最重要的變化CompositionApi
• 嚐鮮Vue3之三：CompositionAPI小結和包裝對象
• 嚐鮮Vue3之四：如何運行Jest單元測試
• 嚐鮮Vue3之五：源碼結構
• 嚐鮮Vue3之六：響應式原理的革新 - Vue二、Vue3實現對比