[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对比刷新 ~~~