vue系列文章 --- 源码目录结构整理（三）
<p><strong>vue的版本是：^2.6.10</strong></p><p>结构如下：</p>
<div class="cnblogs_code">
<pre>|-----<span style="color: rgba(0, 0, 0, 1)"> vue
</span>||---<span style="color: rgba(0, 0, 0, 1)"> dist # 打包之后的目录vue文件
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.common.dev.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.common.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.common.prod.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.esm.browser.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.esm.browser.min.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.esm.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.min.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.runtime.common.dev.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.runtime.common.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.rintime.common.prod.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.runtime.esm.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.runtime.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.runtime.min.js
</span>||---<span style="color: rgba(0, 0, 0, 1)"> src
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> compiler # 模板解析相关的文件
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> codegen # 根据Ast 生成 render 函数
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> events.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> directives # 生成 render 函数之前需要处理的指令
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> bind.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> model.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> on.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> parser # 模板解析
</span>|| | | |--- entity-<span style="color: rgba(0, 0, 0, 1)">decoder.js
</span>|| | | |--- filter-<span style="color: rgba(0, 0, 0, 1)">parser.js
</span>|| | | |--- html-<span style="color: rgba(0, 0, 0, 1)">parser.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | |--- text-<span style="color: rgba(0, 0, 0, 1)">parser.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> codeframe.js
</span>|| | |--- create-<span style="color: rgba(0, 0, 0, 1)">compiler.js
</span>|| | |--- error-<span style="color: rgba(0, 0, 0, 1)">detector.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> helpers.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> optimizer.js
</span>|| | |--- to-<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">.js
</span>|| |----<span style="color: rgba(0, 0, 0, 1)"> core
</span>|| ||--- components # 全局组件 目前只有 keep-<span style="color: rgba(0, 0, 0, 1)">alive
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| || |--- keep-<span style="color: rgba(0, 0, 0, 1)">alive.js
</span>|| ||--- global-<span style="color: rgba(0, 0, 0, 1)">api # 全局方法 添加到vue上的方法
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> assets.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> extends.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> mixin.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> use.js
</span>|| ||---<span style="color: rgba(0, 0, 0, 1)"> instance # 实列相关的内容 包括实列方法。生命周期，事件等。
</span>|| || |--- render-<span style="color: rgba(0, 0, 0, 1)">helpers
</span>|| || ||--- bind-dynamic-<span style="color: rgba(0, 0, 0, 1)">keys.js
</span>|| || ||--- bind-object-<span style="color: rgba(0, 0, 0, 1)">listeners.js
</span>|| || ||--- bind-object-<span style="color: rgba(0, 0, 0, 1)">props.js
</span>|| || ||--- check-<span style="color: rgba(0, 0, 0, 1)">keycodes.js
</span>|| || ||---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| || ||--- render-<span style="color: rgba(0, 0, 0, 1)">list.js
</span>|| || ||--- render-<span style="color: rgba(0, 0, 0, 1)">slot.js
</span>|| || ||--- render-<span style="color: rgba(0, 0, 0, 1)">static.js
</span>|| || ||--- resolve-<span style="color: rgba(0, 0, 0, 1)">filter.js
</span>|| || ||--- resolve-scoped-<span style="color: rgba(0, 0, 0, 1)">slots.js
</span>|| || ||--- resolve-<span style="color: rgba(0, 0, 0, 1)">slots.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> events.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> init.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> inject.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> lifecycle.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> proxy.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> render.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> state.js
</span>|| ||---<span style="color: rgba(0, 0, 0, 1)"> observer # 数据双向绑定文件
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> array.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> dep.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> scheduler.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> traverse.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> watcher.js
</span>|| ||---<span style="color: rgba(0, 0, 0, 1)"> util # 工具方法
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> debug.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> env.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> error.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> lang.js
</span>|| || |--- next-<span style="color: rgba(0, 0, 0, 1)">tick.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> options.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> perf.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> props.js
</span>|| ||---<span style="color: rgba(0, 0, 0, 1)"> vdom # 虚拟dom相关的
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> helpers
</span>|| || | |--- extract-<span style="color: rgba(0, 0, 0, 1)">props.js
</span>|| || | |--- get-first-component-<span style="color: rgba(0, 0, 0, 1)">child.js
</span>|| || | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| || | |--- is-async-<span style="color: rgba(0, 0, 0, 1)">placeholder.js
</span>|| || | |--- merge-<span style="color: rgba(0, 0, 0, 1)">hook.js
</span>|| || | |--- normalize-<span style="color: rgba(0, 0, 0, 1)">children.js
</span>|| || | |--- normalize-scoped-<span style="color: rgba(0, 0, 0, 1)">slots.js
</span>|| || | |--- resolve-async-<span style="color: rgba(0, 0, 0, 1)">component.js
</span>|| || | |--- update-<span style="color: rgba(0, 0, 0, 1)">listeners.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> modules
</span>|| || | |---<span style="color: rgba(0, 0, 0, 1)"> directives.js
</span>|| || | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| || | |---<span style="color: rgba(0, 0, 0, 1)"> ref.js
</span>|| || |--- create-<span style="color: rgba(0, 0, 0, 1)">component.js
</span>|| || |--- create-<span style="color: rgba(0, 0, 0, 1)">element.js
</span>|| || |--- create-functional-<span style="color: rgba(0, 0, 0, 1)">component.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> patch.js
</span>|| || |---<span style="color: rgba(0, 0, 0, 1)"> vnode.js
</span>|| ||---<span style="color: rgba(0, 0, 0, 1)"> config.js # 入口配置文件
</span>|| ||---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> platforms # 平台相关的
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> web # web平台
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> compiler # 编译期间需要处理的指令和模块
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> directives # 指令
</span>|| | | | ||---<span style="color: rgba(0, 0, 0, 1)"> html.js
</span>|| | | | ||---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | ||---<span style="color: rgba(0, 0, 0, 1)"> model.js
</span>|| | | | ||---<span style="color: rgba(0, 0, 0, 1)"> text.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> modules # 模块
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> class.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> model.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> style.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> options.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> util.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> runtime # 运行阶段处理的组件、指令和模块
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> components # 相关的组件
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | | |--- transition-<span style="color: rgba(0, 0, 0, 1)">group.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> transition.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> directives # 相关的指令
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> model.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> show.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> modules # 相关的模块
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> attrs.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> class.js
</span>|| | | | | |--- dom-<span style="color: rgba(0, 0, 0, 1)">props.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> events.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> style.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> transition.js
</span>|| | | | |--- class-<span style="color: rgba(0, 0, 0, 1)">util.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | |--- node-<span style="color: rgba(0, 0, 0, 1)">ops.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> patch.js
</span>|| | | | |--- transition-<span style="color: rgba(0, 0, 0, 1)">util.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> server # 服务端渲染的指令和模块
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> directives # 指令
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> model.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> show.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> modules # 模块
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> attrs.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> class.js
</span>|| | | | | |--- dom-<span style="color: rgba(0, 0, 0, 1)">props.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | | |---<span style="color: rgba(0, 0, 0, 1)"> style.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> compiler.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> util.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> util
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> attrs.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> class.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> compat.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> element.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | | |---<span style="color: rgba(0, 0, 0, 1)"> style.js
</span>|| | | |--- entry-<span style="color: rgba(0, 0, 0, 1)">compiler.js
</span>|| | | |--- entry-runtime-<span style="color: rgba(0, 0, 255, 1)">with</span>-<span style="color: rgba(0, 0, 0, 1)">compiler.js
</span>|| | | |--- entry-<span style="color: rgba(0, 0, 0, 1)">runtime.js
</span>|| | | |--- entry-server-basic-<span style="color: rgba(0, 0, 0, 1)">renderer.js
</span>|| | | |--- entry-server-<span style="color: rgba(0, 0, 0, 1)">renderer.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> weex # weex平台
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> server
</span>|| | |--- bundle-<span style="color: rgba(0, 0, 0, 1)">renderer
</span>|| | | |--- create-bundle-<span style="color: rgba(0, 0, 0, 1)">renderer.js
</span>|| | | |--- create-bundle-<span style="color: rgba(0, 0, 0, 1)">runner.js
</span>|| | | |--- source-map-<span style="color: rgba(0, 0, 0, 1)">support.js
</span>|| | |--- optimizing-<span style="color: rgba(0, 0, 0, 1)">compiler
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> codegen.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> modules.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> optimizer.js
</span>|| | | |--- runtime-<span style="color: rgba(0, 0, 0, 1)">helpers.js
</span>|| | |--- template-<span style="color: rgba(0, 0, 0, 1)">renderer
</span>|| | | |--- create-async-file-<span style="color: rgba(0, 0, 0, 1)">mapper.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> index.js
</span>|| | | |--- parse-<span style="color: rgba(0, 0, 0, 1)">template.js
</span>|| | | |--- template-<span style="color: rgba(0, 0, 0, 1)">stream.js
</span>|| | |--- webpack-<span style="color: rgba(0, 0, 0, 1)">plugin
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> client.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> server.js
</span>|| | | |---<span style="color: rgba(0, 0, 0, 1)"> util.js
</span>|| | |--- create-basic-<span style="color: rgba(0, 0, 0, 1)">renderer.js
</span>|| | |--- create-<span style="color: rgba(0, 0, 0, 1)">renderer.js
</span>|| | |--- render-<span style="color: rgba(0, 0, 0, 1)">context.js
</span>|| | |--- render-<span style="color: rgba(0, 0, 0, 1)">stream.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> render.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> util.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> write.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> sfc
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> parser.js
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> shared
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> constants.js
</span>|| | |---<span style="color: rgba(0, 0, 0, 1)"> util.js
</span>||
||---<span style="color: rgba(0, 0, 0, 1)"> types
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> index.d.ts
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> options.d.ts
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> plugin.d.ts
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vnode.d.ts
</span>|| |---<span style="color: rgba(0, 0, 0, 1)"> vue.d.ts
</span>||---<span style="color: rgba(0, 0, 0, 1)"> package.json
</span>||--- README.md</pre>
</div>
<p>如上是 vue2.6.10版本所有的js目录结构</p>
<p><strong>1. src/compiler:</strong> 该目录包含Vue.js所有编译相关的代码，包括把模板解析成AST语法树、及 AST语法树优化、代码生成等功能。</p>
<p> src/compiler/codegen: 把AST转换成Render函数。<br> src/compiler/parser: 解析模板成AST。<br> src/compiler/directives: 生成 Render 函数之前需要处理的指令。</p>
<p><strong> 2. src/core:</strong> 该目录包含了Vue.js的核心代码，包括内置组件、全局API封装、Vue实列化、观察者、虚拟DOM、工具函数等。</p>
<p> src/core/components: 组件相关的属性，目前这里只有keep-alive组件<br> src/core/global-api: Vue的全局api, 比如 Vue.extend、Vue.mixin.<br> src/core/instance: 实例化相关的。比如 生命周期、事件等。<br> src/core/observer: Vue响应式数据相关的目录。<br> src/core/util: Vue相关的工具方法目录。<br> src/core/vdom: 虚拟dom相关的内容。</p>
<p><strong> 3. src/platforms:</strong> platforms 是Vue.js的入口文件，有2个入口文件 web 和 weex，分别打包运行在 web或 weex 平台上的。</p>
<p> src/platforms/web 平台上的(src/platforms/weex 也是一样的意思)。<br> src/platforms/web/compiler: web端编译器相关的代码，用来编译模板成Render函数。<br> src/platforms/web/runtime: web端运行时相关的代码，用来创建Vue实列等操作。<br> src/platforms/web/util: 相关工具类。<br> src/platforms/web/server: 服务器端渲染相关的。</p>
<p><strong> 4. src/server:</strong> Vue2.0+ 为了支持服务器端渲染，所有服务器端渲染相关的逻辑都放在这个目录下。</p>
<p><strong> 5. src/sfc:</strong> 该目录下的代码逻辑会把 .vue 文件内容解析成一个 javascript 的对象。<br> <br> src/sfc/parser.js: 转换单文件组件(*.vue) 解析成一个javascript对象。 </p>
<p><strong> 6. src/shared:</strong> 该目录下会定义一些工具方法。这些工具方法会被浏览器端 Vue.js 和 服务器端 Vue.js所共享的。</p><br><br>
来源：https://www.cnblogs.com/tugenhua0707/p/11756575.html
頁:
[1]