[TOC] * * * * * # 1 核心總覽 * Vue主要包括編譯時和運行時兩部分 * 編譯時的文件分布在 * (compiler\\) 主要包含模板編譯 * (platforms\web\compiler\\) 主要包含web平臺編譯擴展 * 運行時的文件分布在 * (platforms\web\runtime\\) 主要包含web平臺模板動態更新 * (core\\) 主要包含模板與數據綁定 * 關于服務器渲染(server\\)分析省略。 # 2 核心功能 >(編譯時) >> (parse)模板解析為ASTElement, >> (optimizer)優化解析結果ASTElement,減少遍歷元素 >> (codegen)根據ASETElement,生成渲染函數 >主要實現帶指令模板到渲染函數生成 >(運行時) >> (runtime) 實現模板的動態更新(patch()) >> (vue) 實現模板與數據的雙向綁定($mount()) > 主要實現模板與數據的互動。 # 3 核心關系 ## 1 整體結構 ### .1 編譯運行時組織 ~~~ entries/web-runtime-with-compiler.js ;編譯運行時構建入口 entries/web-runtime.js ;運行時構建入口 web/compiler/index.js ;web平臺擴展編譯接口 ~~~ ### .2 編譯時組織 ~~~ entires/web-compiler.js ;編譯時構建入口 web/compiler/index.js ;web平臺擴展編譯接口 ~~~ ### .3 運行時組織 ~~~ entries/web-runtime.js ;web平臺擴展運行接口 core/index.js ;vue核心數據與模板綁定 web/runtime/patch.js ;web平臺模板動態刷新 web/runtime/directives/index.js ;web平臺運行時指令刷新 web/runtime/components/index.js ;web平臺運行時組件刷新 ~~~ ## 2 編譯時結構 ### .1 編譯時 ~~~ web/compiler/index.js ;web平臺擴展編譯接口 compiler/index.js ;模板編譯接口 web/compiler/modules/index.js ;web平臺擴展模塊編譯 web/compiler/directives/index.js ;web平臺擴展指令編譯 ~~~ ### .2 編譯時模塊 ~~~ compiler/index.js ;模板編譯 parser/index.js ;模板解析 optimizer.js ;解析優化 codegen.js ;渲染生成 /directives/index.js ;基礎指令編譯 ~~~ ## 3 運行時結構 ### .1 核心模塊 ~~~ core/index.js ;核心數據與模板綁定 core/instance/index.js ;vue核心接口 core/global-api/index.js ;vue擴展接口 ~~~ ### .2 運行時模塊 ~~~ web/runtime/patch.js ;web平臺擴展動態刷新接口 web/runtime/node-ops.js ;web平臺節點操作 web/runtime/modules/index.js ;web平臺運行時模塊刷新 core/vdom/modules/index.js ;核心dom模塊刷新 core/vdom/patch.js ;核心dom對比刷新 ~~~