[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基礎
- 框架總結