[TOC]
* * * * *
# 1 核心目录名称(src\\)
* plafroms\web\ 目录下主要包含web平台编译运行时接口
* server\ 目录下主要包含server端接口
* entries\ 目录下主要包含构建入口
* compiler\ 目录下主要包含模板编译接口
* core\ 目录下主要包含核心接口
# 2 核心目录功能(src\\)
* 模板编译(compiler\)与核心接口(core\)是视图与数据关系接口
* 模板编译(compiler\)解析模板生成渲染函数与静态属性渲染
* 核心接口(core\)主要关注数据与视图的接口
* 其中平台(platforms\web)与服务器(server\)端独立
* 构建入口(entries\)主要实现编译时,运行时构建入口
* 下面根据包导入分析各个目录之间的依赖关系
# 3 模板编译(src\\compiler\\)
## 3-0 (index.js) 模板编译接口
~~~
;导入模板解析,解析优化，渲染生成等模板编译接口
import { parse } from './parser/index'
import { optimize } from './optimizer'
import { generate } from './codegen'
;导出封装模板编译接口,返回渲染函数,静态渲染数组。
;返回CompileResult结构信息。
export function compile (
template: string,
options: CompilerOptions
): CompiledResult
~~~
## 3-1 (parser\) 模板解析接口
### .1 (index.js) 模板解析入口
~~~
;导入各种模板解析方法
import { decodeHTML } from 'entities'
import { parseHTML } from './html-parser'
import { parseText } from './text-parser'
;导入工具接口
import { hyphenate, cached, no } from 'shared/util'
;导入模板解析助手
import {
pluckModuleFunction,
getAndRemoveAttr,
addProp,
addAttr,
addStaticAttr,
addHandler,
addDirective,
getBindingAttr,
baseWarn
} from '../helpers'
;导出模板解析接口
;主要是调用parseHTML,parseText,decodeHTML等接口
;生成ASTElement或void
export function parse (
template: string,
options: CompilerOptions
): ASTElement | void
~~~
### .2 (html-parser.js) html解析
~~~
;导入html实体生成,
import { decodeHTML } from 'entities'
;导入基础工具
import { makeMap, no } from 'shared/util'
;导入web平台工具
import { isNonPhrasingTag, canBeLeftOpenTag } from 'web/util/index'
;导出html解析接口parseHTML()
;handler包含各种解析方法。
export function parseHTML (html, handler)
~~~
### .3 (decodeHTML) html实体生成
~~~
;导出生成html实体接口
export function decodeHTML (html: string):
~~~
### .4 (text-parser.js) text文本解析
~~~
;导入基础工具
import { cached } from 'shared/util'
;导入过滤器解析
import { parseFilters } from './filter-parser'
;导出文本解析接口parseText()
export function parseText (
text: string,
delimiters?: [string, string]
): string | void
~~~
### .5 (filter-parser.js) 过滤器解析
~~~
;导出过滤器解析接口
export function parseFilters (exp: string): string
~~~
## 3-2 (optimizer.js) 模板解析优化接口
~~~
;导入基础工具
import { makeMap, isBuiltInTag, cached } from 'shared/util'
;导出模板解析优化接口optimize()
;修改ast节点的static,staticRoot属性
export function optimize (root: ?ASTElement, options: CompilerOptions)
~~~
## 3-4 (codegen.js) 模板解析渲染生成接口
~~~
;事件解析接口
import { genHandlers } from './events'
;模板解析助手
import { baseWarn, pluckModuleFunction } from './helpers'
;指令解析
import baseDirectives from './directives/index'
;基础工具
import { no } from 'shared/util'
;根据ast生成渲染函数接口
;生成渲染函数,静态属性渲染
export function generate (
ast: ASTElement | void,
options: CompilerOptions
): {
render: string,
staticRenderFns: Array<string>
}
~~~
# 4 web平台(platforms\\web\\)
## 4-1 (compiler\\) web平台编译时的扩展接口
### .1 (index.js) web平台编译时扩展接口
~~~
;导入的基础工具
import { extend, genStaticKeys, noop } from 'shared/util'
import { warn } from 'core/util/debug'
;导入模板编译(compiler\)接口
import { compile as baseCompile } from 'compiler/index'
import { detectErrors } from 'compiler/error-detector'
;导入web平台编译时模块,指令,工具接口扩展
import modules from './modules/index'
import directives from './directives/index'
import { isIE, isReservedTag, isUnaryTag, mustUseProp, getTagNamespace } from '../util/index'
;导出web平台编译时接口,
;主要是注册web平台的模块,指令,工具
;并且可以接受额外扩展
export function compileToFunctions
~~~
### .2(directives\\) web平台编译时指令
* 1 (index.js) 编译时指令入口
~~~
;导入web编译时指令
import model from './model'
import text from './text'
import html from './html'
;导出web编译时指令
export default {
model,
text,
html
}
~~~
* 2 (model.js) 编译时model指令
~~~
;导入编译助手
import { addHandler, addProp, getBindingAttr } from 'compiler/helpers'
;导出model指令编译接口
export default function model (
el: ASTElement,
dir: ASTDirective,
_warn: Function
): ?boolean
~~~
* 3 (text.js) 编译时text指令
~~~
;导入编译助手
import { addProp } from 'compiler/helpers'
;导出text指令编译接口
export default function text (el: ASTElement, dir: ASTDirective)
~~~
* 4 (html.js) 编译时html指令
~~~
;导入编译助手
import { addProp } from 'compiler/helpers'
;导出html指令编译
export default function html (el: ASTElement, dir: ASTDirective)
~~~
### .3(modules\\) web平台编译时模块
* 1 (index.js) 编译时模块入口
~~~
;导入web编译时模块接口
import klass from './class'
import style from './style'
import transition from './transition'
;导出web编译时接口模块
export default [
klass,
style,
transition
]
~~~
* 2 (class.js) web平台编译时class模块
~~~
;导入文本解析
import { parseText } from 'compiler/parser/text-parser'
;导入编译助手
import {
getAndRemoveAttr,
getBindingAttr,
baseWarn
} from 'compiler/helpers'
;导出class模块编译过程
export default {
staticKeys: ['staticClass'],
transformNode,
genData
}
~~~
* 3 (style.js) web平台编译时style模块
~~~
;导入编译助手
import {
getBindingAttr
} from 'compiler/helpers'
;导出style模块编译过程
export default {
transformNode,
genData
}
~~~
* 4 (transition.js) web平台编译时transition模块
~~~
;导入编译助手
import {
getBindingAttr
} from 'compiler/helpers'
;导出transion模块编译接口
export default {
transformNode,
genData,
transformCode
}
~~~
## 4-2 (runtime\\) web平台运行时的扩展接口
* 1(patch.js) web运行时对比刷新接口
~~~
;导入web运行时节点操作扩展
import * as nodeOps from 'web/runtime/node-ops'
;导入核心虚拟dom对比刷新接口
import { createPatchFunction } from 'core/vdom/patch'
;导入核心虚拟dom模块接口
import baseModules from 'core/vdom/modules/index'
;导入web运行时模块扩展接口
import platformModules from 'web/runtime/modules/index'
~~~
### .2 (directives\\) web运行时指令
* (index.js) 运行时指令接口
~~~
;导入运行时指令
import model from './model'
import show from './show'
;导出运行时指令接口
export default {
model,
show
}
~~~
* (model.js) 运行时model指令
~~~
;导入基础工具
import { warn } from 'core/util/index'
import { isAndroid, isIE9 } from 'web/util/index'
;导出model指令运行时接口
export default {
bind (el, binding, vnode){}
postupdate (el, binding, vnode) {}
}
~~~
* (show.js) 运行时show指令
~~~
;导入基础助手
import { isIE9 } from 'web/util/index'
;导入动画模块
import { enter, leave } from '../modules/transition'
;导出show指令运行时接口
export default {
bind (el: HTMLElement, { value }: VNodeDirective, vnode: VNodeWithData){}
update (el: HTMLElement, { value }: VNodeDirective, vnode: VNodeWithData)
}
~~~
### .3 (modules\\) web运行时模块
* (index.js) web运行时模块接口
~~~
~~~
* (attrs.js) web运行时attrs模块接口
~~~
;导入web助手
import {
isBooleanAttr,
isEnumeratedAttr,
isXlink,
xlinkNS,
getXlinkProp,
isFalsyAttrValue
} from 'web/util/index'
;导出attr运行时模块接口
export default {
create: function (_: any, vnode: VNodeWithData)
update: updateAttrs
}
~~~
* (class.js) web运行时class模块接口
~~~
;导入基础助手
import { genClassForVnode, concat, stringifyClass } from 'web/util/index'
;导出class模块运行时接口
export default {
create: updateClass,
update: updateClass
}
~~~
* (events.js) web运行时events模块接口
~~~
;导入核心事件更新接口
import { updateListeners } from 'core/vdom/helpers'
;导出事件运行时接口
export default {
create: updateDOMListeners,
update: updateDOMListeners
}
~~~
* (props.js) web运行时props模块接口
~~~
;导出props运行时接口
export default {
create: updateProps,
update: updateProps
}
~~~
* (style.js) web运行时style模块接口
~~~
;导入基础助手
import { cached, camelize, toObject, extend } from 'shared/util'
;导出style运行时接口
export default {
create: updateStyle,
update: updateStyle
}
~~~
* (transition.js) web运行时transition模块接口
~~~
;导入基础助手
import { addClass, removeClass } from '../class-util'
import { inBrowser, resolveAsset } from 'core/util/index'
import { cached, remove, extend } from 'shared/util'
import { isIE9 } from 'web/util/index'
;导出transition接口
~~~
### .4 (components\\) web运行时组件
## 4-3 (util\\) web平台助手工具
~~~
;导出web平台attrs,class,element操作接口
export * from './attrs'
export * from './class'
export * from './element'
;导出web平台元素查找接口query()
export function query
~~~
## 4-4 (server\\) web服务器的扩展接口
~~~
~~~
# 5 服务器端(server\\)
# 6 核心结构(core\\)
## 6-0 (config.js) 核心配置
~~~
;导入基础工具
import { no } from 'shared/util'
;导出核心配置
export default config
~~~
## 6-1 (observer\\) 核心数据绑定实现
### .1 (index.js) 数据绑定入口
~~~
;导入基础配置,消息订阅器,数组监视器接口
import config from '../config'
import Dep from './dep'
import { arrayMethods } from './array'
;导入基础工具
import {
def,
isObject,
isPlainObject,
hasProto,
hasOwn,
isReserved,
warn
} from '../util/index'
;导出数据绑定接口 Observer()
export class Observer {
value: any;
dep: Dep;
vmCount: number;
}
export function observe()
~~~
### .2 (dep.js) 消息订阅管理
~~~
;导入watcher类型,基础工具
import type Watcher from './watcher'
import { remove } from '../util/index'
;导出消息订阅管理接口Dep
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
}
~~~
### .3 (watcher.js) 消息订阅者
~~~
;导入配置信息
import config from '../config'
;导入消息订阅管理接口Dep
import Dep from './dep'
;导入watcher刷新队列接口scheduler
import { queueWatcher } from './scheduler'
;导入基础工具
import {
warn,
remove,
isObject,
parsePath,
_Set as Set
} from '../util/index'
;导出消息订阅接口Watcher
export default class Watcher {
vm: Component;
expression: string;
cb: Function;
id: number;
deep: boolean;
user: boolean;
lazy: boolean;
dirty: boolean;
active: boolean;
deps: Array<Dep>;
newDeps: Array<Dep>;
depIds: Set;
newDepIds: Set;
getter: Function;
value: any;
}
~~~
### .4 (scheduler.js) 消息订阅者刷新队列接口
~~~
;导入消息订阅者接口Watcher
import type Watcher from './watcher'
;导入配置信息,基础工具
import config from '../config'
import {
warn,
nextTick
} from '../util/index'
;导出添加wacther到队列接口queueWatcher()
export function queueWatcher()
~~~
### .5 (array.js) 数组数据监视接口
~~~
;导入基础工具
import { def } from '../util/index'
;导出数组原型接口
export const arrayMethods = Object.create(arrayProto)
~~~
## 6-2 (vdom\\) 核心虚拟dom实现
### .1 (patch.js) 虚拟节点Vnode对比刷新接口
~~~
;导入虚拟节点
import VNode from './vnode'
;导入基础工具
import { isPrimitive, renderString, warn } from '../util/index'
;导出虚拟节点对比刷新接口createPatchFunction()
;这个对比刷新接口在web\runtime\patch.js中调用
export function createPatchFunction (backend)
~~~
### .2 (Vnode.js) 虚拟节点Vnode实例化接口
~~~
export default class VNode {
tag: string | void;
data: VNodeData | void;
children: Array<VNode> | void;
text: string | void;
elm: Node | void;
ns: string | void;
context: Component | void;
key: string | number | void;
componentOptions: VNodeComponentOptions | void;
child: Component | void;
parent: VNode | void;
}
~~~
### .3 (create-component.js) 虚拟组件节点创建接口
~~~
;导入Vue核心
import Vue from '../instance/index'
;导入虚拟节点实例化接口
import VNode from './vnode'
;导入核心钩子调用接口
import { callHook } from '../instance/lifecycle'
;导入基础助手
import { warn, isObject, hasOwn, hyphenate } from '../util/index'
;导出创建虚拟组件接口createComponent()
export function createComponent (
Ctor: Class<Component> | Function | Object | void,
data?: VNodeData,
parent: Component,
context: Component,
tag?: string
): VNode | void
~~~
### .4 (create-element.js) 虚拟节点创建接口
~~~
;导入虚拟节点实例化接口
import VNode, { emptyVNode } from './vnode'
;导入配置
import config from '../config'
;导入创建组件接口
import { createComponent } from './create-component'
;导入助手工具
import { normalizeChildren } from './helpers'
;导入核心渲染接口
import { renderState } from '../instance/render'
;导入基础助手
import { warn, resolveAsset } from '../util/index'
;导出创建带孩子节点元素接口
export function renderElementWithChildren (
vnode: VNode | void,
children: VNodeChildren | void
): VNode | void
~~~
### .5(modules\\index.js) 虚拟节点基础指令接口
~~~
;导入基础指令
import directives from './directives'
import ref from './ref'
;导出基础指令
;基础指令在web\runtime\
export default [
ref,
directives
]
~~~
## 6-3 (components\\) 核心组件实现
###.1 (index.js) 核心组件接口
###.2 (keep-alive.js) keep-alive组件属性
## 6-4 (instance\\) 核心接口组织
### .1(index.js) 核心接口入口文件
~~~
;导入核心功能注册接口
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
;导出Vue核心
export default Vue
~~~
### .2(init.js) Vue核心初始化接口
~~~
;导入核心功能初始化接口
import { initProxy } from './proxy'
import { initState } from './state'
import { initRender } from './render'
import { initEvents } from './events'
import { initLifecycle, callHook } from './lifecycle'
;导入基础工具
import { mergeOptions } from '../util/index'
;导出初始化注册接口initMixin()
;_init()
export function initMixin (Vue: Class<Component>)
~~~
### .3 (proxy.js) proxy接口注册
~~~
;导入基础工具
import { warn, makeMap } from '../util/index'
;导出Proxy初始化接口
;_renderProx
export { initProxy }
~~~
### .4 (state.js) Vue的内部属性操作接口
~~~
;导入数据绑定接口
import Watcher from '../observer/watcher'
import Dep from '../observer/dep'
import {
observe,
defineReactive,
observerState,
proxy,
unproxy
} from '../observer/index'
;导入基础工具
import {
warn,
hasOwn,
isPlainObject,
bind,
validateProp,
noop
} from '../util/index'
;导出Vue内部属性初始化接口initState()
export function initState (vm: Component)
;导出Vue属性操作注册接口
;$data $watch()
export function stateMixin (Vue: Class<Component>)
~~~
### .5 (render.js) 核心渲染接口
~~~
;导入基础配置
import config from '../config'
;导入虚拟节点操作接口
import VNode, { emptyVNode } from '../vdom/vnode'
import { normalizeChildren } from '../vdom/helpers'
;导入基础工具
import {
warn, bind, isObject, toObject,
nextTick, resolveAsset, renderString
} from '../util/index'
;导入虚拟dom创建元素节点接口
import {
renderElement,
renderElementWithChildren,
renderText,
renderStatic
} from '../vdom/create-element'
;导出核心渲染初始化接口
export function initRender (vm: Component)
;导出核心渲染注册接口
;$nextTick()
;_render()
;_h() _e() _t() _m() _s() _f() _l() _b()
export function renderMixin (Vue: Class<Component>)
~~~
### .6(events.js) 核心事件接口
~~~
;导入基础工具
import { bind, toArray } from '../util/index'
;导入虚拟dom事件注册接口
import { updateListeners } from '../vdom/helpers'
;导出事件接口初始化
export function initEvents (vm: Component)
;导出事件接口注册
;$on() $once() $off() $emit()
export function eventsMixin (Vue: Class<Component>)
~~~
### .7(lifecycle.js) 核心生命周期接口
~~~
;导入消息订阅
import Watcher from '../observer/watcher'
;导入虚拟节点
import { emptyVNode } from '../vdom/vnode'
;导入数据绑定
import { observerState } from '../observer/index'
;导入基础工具
import { warn, validateProp, remove, noop } from '../util/index'
;导出生命周期初始化接口
export function initLifecycle (vm: Component)
;导出生命周期注册接口
;_mount() 挂载到el元素
;_update() 刷新接口
;_updateFromParent()
;$forceUpdate()
;$destroy()
;callHook()
export function lifecycleMixin (Vue: Class<Component>)
~~~
## 6-5 (global-api\\) 核心扩展接口
###.1 (index.js)
~~~
;导入基础配置,基础工具
import config from '../config'
import * as util from '../util/index'
;导入扩展api接口
import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
;导入数据绑定操作接口
import { set, del } from '../observer/index'
;导入内置组件接口
import builtInComponents from '../components/index'
;导出扩展api接口
export function initGlobalAPI (Vue: GlobalAPI)
~~~
###.2 (use.js)
~~~
;导入基础工具
import { toArray } from '../util/index'
;导出插件注册初始化接口
;Vue.use()
export function initUse (Vue: GlobalAPI)
~~~
###.3 (mixin.js)
~~~
;导入基础配置
import config from '../config'
;导入基础工具
import { mergeOptions } from '../util/index'
;导出属性合并初始接口
;Vue.mixin()
export function initMixin (Vue: GlobalAPI)
~~~
###.4 (extend.js)
~~~
;导入基础配置,基础工具
import config from '../config'
import { warn, remove, mergeOptions } from '../util/index'
;导出继承扩展注册接口
;Vue.extend()
export function initExtend (Vue: GlobalAPI)
~~~
###.5 (assets.js)
~~~
;导入基础配置,基础工具
import config from '../config'
import { warn, isPlainObject } from '../util/index'
;导出配置资源注册
export function initAssetRegisters (Vue: GlobalAPI)
~~~
## 6-6 (index.js) 核心入口文件
~~~
;导入基础配置
import config from './config'
;导入扩展api
import { initGlobalAPI } from './global-api/index'
;导入核心api
import Vue from './instance/index'
;导出核心接口
export default Vue
~~~
# 7 构建入口(entries\\)
## 7-1 (web-compiler.js) web编译时构建入口
~~~
;导入基础工具
import { extend } from 'shared/util'
;导入web平台编译时接口
import { compile as baseCompile, baseOptions } from 'web/compiler/index'
import { detectErrors } from 'compiler/error-detector'
;导出组件解析,web编译时接口
export { parseComponent } from 'compiler/parser/sfc-parser'
export { compileToFunctions } from 'web/compiler/index'
;导出在web平台编译时基础上模块可扩展,指令可扩展接口
;web编译时主要实现模板的编译过程
export function compile (
template: string,
options?: Object
)
~~~
## 7-2(web-runtime.js) web运行时构建入口
~~~
;导入核心Vue,核心配置,基础工具
import Vue from 'core/index'
import config from 'core/config'
import { extend, noop } from 'shared/util'
;导入运行时比较刷新,运行时指令,运行时模块,基础工具
import { patch } from 'web/runtime/patch'
import platformDirectives from 'web/runtime/directives/index'
import platformComponents from 'web/runtime/components/index'
import { query, isUnknownElement, isReservedTag, mustUseProp } from 'web/util/index'
;扩展Vue的运行时属性
Vue.config.isUnknownElement
Vue.config.isReservedTag
Vue.config.mustUseProp
Vue.options.directives
Vue.options.components
;扩展Vue.prototype.$mount()接口
;与编译运行时的差别在于编译时在运行时外执行的。
Vue.prototype.__patch__()
Vue.prototype.$mount()
~~~
## 7-3 (web-runtime-with-compiler.js) web编译运行时构建入口
~~~
;导入web运行时构建入口
import Vue from './web-runtime'
;导入基础工具
import { warn, cached } from 'core/util/index'
import { query } from 'web/util/index'
;导入web编译时入口
import { compileToFunctions } from 'web/compiler/index'
;导出编译运行接口
;主要是在$mount()中调用web编译时接口compileToFunctions
Vue.prototype.$mount()
~~~
## 7-4 (web-server-renderer.js) web服务端渲染构建入口
- 框架概述
- 框架目录
- 类型检查
- 测试示例
- 构建目录
- 核心依赖
- 框架结构
- 模板编译(compiler)
- directives(指令解析)
- parser(模板解析)
- codegen.js(生成渲染函数)
- error-detector.js(错误检测)
- events.js(事件解析)
- helpers.js(编译助手)
- index.js(编译入口)
- optimizer.js(解析优化)
- 核心接口(core)
- components(框架组件)
- global-api(框架扩展)
- instance(Vue核心)
- observer(数据绑定)
- util(核心工具)
- vdom(虚拟dom)
- config.js(配置文件)
- index.js(入口文件)
- 构建入口(entries)
- web-compiler.js(编译时)
- web-runtime.js(运行时)
- web-runtime-with-compiler.js(编译运行时)
- web-server-renderer.js(服务端渲染)
- 平台接口(platforms\web)
- compiler(web编译时)
- runtime(web运行时)
- server(web服务渲染)
- util(web工具)
- 服务端渲染(server)
- create-renderer.js(渲染接口)
- render.js(函数渲染)
- render-stream.js(流渲染)
- 工具目录(shared)
- util(工具文件)
- 框架流程
- Vue初始化
- Vue模板编译
- Vue数据渲染
- Vue数据绑定
- 框架更新
- 更新日志
- 基础原理
- js基础
- 数据绑定基础
- vdom基础
- mvvm基础
- 框架总结