💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
[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服务端渲染构建入口