仅作为学习目的!
- compiler: 包含针对平台的编译器实现,如针对 Web 平台的编译器。
- core: 包含 Vue 核心实现,如 Vue 实例、响应式系统、全局 API 等。
- platforms: 包含针对平台的运行时实现,如针对 Web 平台的运行时实现。
- shared: 包含在不同目录之间共享的常量和工具函数。
- types: 包含 Vue 的类型定义。
- v3: 包含 Vue 3 版本的实验性 API 实现。
其中 compiler、core 和 platforms 三个目录是 Vue 核心的重要组成部分,它们负责处理 Vue 应用的编译、运行时逻辑和平台特定逻辑。shared 目录则包含了一些在不同目录之间共享的常量和工具函数。types 目录包含了 Vue 的类型定义,可以用来进行静态类型检查。最后 v3 目录包含 Vue 3 版本的实验性 API 实现,可以用来尝试最新的特性和功能。
- 从
src/core/index.js
开始,这是整个源码的入口文件。 src/core/config.js
文件,其中定义了全局的配置项。src/core/instance/index.js
文件,它定义了 Vue 实例的构造函数,并包含了实例的生命周期、事件等基础逻辑。src/core/instance/init.js
文件,这是 Vue 实例初始化的入口函数。- 然后可以深入了解 Vue 的响应式系统,包括
src/core/observer
和src/core/vdom/create-component.js
文件。 src/core/vdom
目录下的文件,这些文件定义了虚拟 DOM 的相关逻辑。src/core/instance/render.js
文件,这是 Vue 实例的渲染函数。src/core/directives
目录下的文件,其中包含了内置的指令逻辑。src/core/global-api/index.js
文件,它定义了 Vue 的全局 API,如Vue.extend
、Vue.mixin
、Vue.component
等。src/platforms/web
目录下的文件,这些文件包含了针对 Web 平台的特定逻辑。src/core/util
目录下的文件,这些文件定义了一些工具函数,如nextTick
、warn
、extend
等。
└── dist
└── src
├── compiler
│ ├── codeframe.ts 提供代码帧,用于生成源码位置信息。
│ ├── codegen 包含编译器生成的代码相关的逻辑。
│ │ └── events.ts 包含了编译器生成事件处理相关代码的逻辑
│ ├── create-compiler.ts 创建编译器实例
│ ├── directives 包含Vue模板中指令的解析和处理逻辑
│ │ ├── bind.ts 实现了v-bind指令的解析和处理逻辑
│ │ ├── index.ts 该文件夹的入口文件,用于导出指令相关的方法
│ │ ├── model.ts 实现了v-model指令的解析和处理逻辑
│ │ └── on.ts 实现了v-on指令的解析和处理逻辑
│ ├── error-detector.ts 检测模板中的错误。
│ ├── helpers.ts 编译器的工具函数。
│ ├── index.ts 编译器的入口文件。
│ ├── optimizer.ts 模板优化器,用于优化静态节点。
│ ├── parser 包含模板解析器的逻辑。
│ │ ├── entity-decoder.ts 解码 HTML 实体,例如 < 解码为 <。
│ │ ├── filter-parser.ts 解析模板字符串中的过滤器语法
│ │ ├── html-parser.ts 解析模板字符串中的 HTML 标签和属性等信息,生成 AST
│ │ ├── index.ts 导出 parser 相关逻辑的入口文件
│ │ └── text-parser.ts 解析文本节点中的插值表达式,例如 {{ msg }}。
│ └── to-function.ts 将模板编译为可执行的JavaScript函数。
├── core
│ ├── components 包含核心组件的实现,例如keep-alive。
│ │ ├── index.ts
│ │ └── keep-alive.ts
│ ├── config.ts Vue全局配置对象。
│ ├── global-api 定义Vue的全局API,例如Vue.use()和Vue.mixin()。
│ │ ├── assets.ts 文件定义了全局注册组件、指令、过滤器的 API
│ │ ├── extend.ts 定义了全局扩展组件构造函数的 API
│ │ ├── index.ts global-api 的入口文件
│ │ ├── mixin.ts 定义了全局混入功能的 API
│ │ └── use.ts 定义了全局插件功能的 API
│ ├── index.ts 核心代码的入口文件
│ ├── instance 包含Vue实例的实现,例如事件处理、生命周期方法和渲染相关的逻辑。
│ │ ├── events.ts Vue 实例事件相关的逻辑实现
│ │ ├── index.ts instance 模块的入口文件,导出了 Vue 实例相关的方法和属性
│ │ ├── init.ts Vue 实例初始化相关的逻辑实现,包括了状态初始化、事件初始化、生命周期初始化等。
│ │ ├── inject.ts Vue 实例中依赖注入相关的实现,包括了 provide/inject 和 $attrs/$listeners 等。
│ │ ├── lifecycle.ts Vue 实例生命周期相关的逻辑实现,包括了各个生命周期钩子函数的调用逻辑。
│ │ ├── proxy.ts Vue 实例代理相关的逻辑实现,用于实现类似于 vm.prop 访问方式的数据访问。
│ │ ├── render-helpers 该目录下的一系列文件包含了渲染相关的帮助函数的实现,用于帮助 Vue 生成渲染函数。
│ │ │ ├── bind-dynamic-keys.ts 提供了动态绑定的 key
│ │ │ ├── bind-object-listeners.ts 提供了监听器对象的绑定
│ │ │ ├── bind-object-props.ts 提供了对象属性的绑定
│ │ │ ├── check-keycodes.ts 提供了键盘码的检查
│ │ │ ├── index.ts render-helpers入口文件
│ │ │ ├── render-list.ts 提供了列表的渲染
│ │ │ ├── render-slot.ts 提供了插槽的渲染
│ │ │ ├── render-static.ts 提供了静态内容的渲染
│ │ │ ├── resolve-filter.ts 提供了过滤器的解析
│ │ │ ├── resolve-scoped-slots.ts 提供了作用域插槽的解析
│ │ │ └── resolve-slots.ts 提供了插槽的解析。
│ │ └── render.ts
│ ├── observer 包含响应式系统的实现,例如观察者、调度器和依赖追踪
│ │ ├── array.ts 响应式数组的实现,通过重写数组的部分方法来实现响应式
│ │ ├── dep.ts 依赖收集器,用于收集响应式对象的依赖,以便在数据变化时通知更新
│ │ ├── index.ts observer 模块的入口文件,定义了观察者和响应式对象的类型
│ │ ├── scheduler.ts 调度器,用于在更新视图前收集更新触发的 watcher,然后按顺序执行更新操作。
│ │ ├── traverse.ts 用于遍历响应式对象的工具函数,用于依赖收集。
│ │ └── watcher.ts 观察者的实现,当响应式对象的依赖变化时,通知更新视图。它有多个子类,包括计算属性、监听器和渲染 watcher 等。
│ └── util Vue核心的工具函数。
│ │ ├── debug.ts 提供用于调试的函数。
│ │ ├── env.ts 提供环境相关的判断函数。
│ │ ├── error.ts 提供错误相关的处理函数。
│ │ ├── index.ts 工具函数的入口文件。
│ │ ├── lang.ts 提供处理语言相关的函数
│ │ ├── next-tick.ts 提供下一次Tick的相关函数。
│ │ ├── options.ts 提供用于处理 Vue 的选项的函数
│ │ ├── perf.ts 提供用于性能优化的函数。
│ │ ├── props.ts 提供处理组件 props 的函数。
│ │ └── util.ts 提供通用的工具函数。
│ └── vdom
│ ├── create-component.js 创建 Vue 组件实例的工具函数。
│ ├── create-element.js 创建虚拟 DOM 元素的工具函数。
│ ├── create-functional-component.js 创建函数式组件的工具函数。
│ ├── patch.js 定义虚拟 DOM 的 patch 算法,用于将新旧虚拟 DOM 树进行差异化比较并更新 DOM。
│ ├── vnode.js 定义虚拟 DOM 节点(VNode)类,用于描述真实 DOM 的数据结构。
│ └── helpers
│ ├── extract-props.js 提取组件属性的工具函数。
│ ├── get-first-component-child.js 获取组件的第一个子组件的工具函数。
│ ├── init.js 初始化虚拟 DOM 节点的工具函数。
│ ├── normalize-children.js 将子节点规范化为虚拟 DOM 节点数组的工具函数。
│ ├── resolve-async-component.js 解析异步组件的工具函数。
│ └── update-listeners.js 更新组件事件监听器的工具函数。
├── global.d.ts 定义全局类型声明
├── platforms
│ └── web 包含了针对 Web 平台的 Vue 运行时和编译器的实现。
│ ├── compiler 包含针对Web平台的编译器实现。
│ │ ├── directives
│ │ │ ├── html.ts 编译处理v-html
│ │
│ │ │ ├── index.ts
│ │ │ ├── model.ts v-model
│ │ │ └── text.ts v-text
│ │ ├── index.ts Web 平台的入口文件,主要导出了 createApp 方法,用于创建 Vue 应用程序实例。
│ │ ├── modules 文件夹包含了针对 Web 平台的编译器所需的一些模块化功能的实现
│ │ │ ├── class.ts 提供了对 HTML class 属性的支持
│ │ │ ├── dom-props.ts 提供了对 DOM 属性的支持。
│ │ │ ├── events.ts 提供了对事件处理的支持
│ │ │ ├── index.ts modules 文件夹的入口文件。
│ │ │ ├── model.ts 提供了对表单元素的支持
│ │ │ ├── style.ts 提供了对内联 style 的支持。
│ │ │ └── transition.ts 提供了对过渡效果的支持。
│ │ ├── options.ts 提供 modules 文件夹的辅助工具函数。
│ │ └── util.ts 提供 modules 文件夹的辅助工具函数。
│ ├── entry-compiler.ts 带编译器的构建入口文件,导出 compiler 和 runtime 两个部分。
│ ├── entry-runtime-esm.ts 不带编译器的构建入口文件,导出 ES6 模块格式的 runtime 部分。
│ ├── entry-runtime-with-compiler-esm.ts 带编译器的构建入口文件,导出 ES6 模块格式的 runtime 和 compiler 两个部分。
│ ├── entry-runtime-with-compiler.ts 带编译器的构建入口文件,导出 runtime 和 compiler 两个部分。
│ ├── entry-runtime.ts 不带编译器的构建入口文件,导出 runtime 部分。
│ ├── runtime 针对Web平台的运行时实现。
│ │ ├── class-util.ts 定义了一些和类有关的工具函数
│ │ ├── components 目录下的文件定义了针对 Web 平台的过渡动画相关的组件实现
│ │ │ ├── index.ts
│ │ │ ├── transition-group.ts
│ │ │ └── transition.ts
│ │ ├── directives 目录下的文件定义了针对 Web 平台的指令实现
│ │ │ ├── index.ts
│ │ │ ├── model.ts
│ │ │ └── show.ts
│ │ ├── index.ts
│ │ ├── modules 针对平台(例如 Web)的模块系统
│ │ │ ├── attrs.ts 用于处理 DOM 元素的属性
│ │ │ ├── class.ts 用于操作 DOM 元素的 class 属性
│ │ │ ├── dom-props.ts 用于操作 DOM 元素的属性
│ │ │ ├── events.ts 用于处理 DOM 元素的事件
│ │ │ ├── index.ts
│ │ │ ├── style.ts 定义了处理组件上的内联样式的逻辑
│ │ │ └── transition.ts 定义了处理组件过渡的逻辑
│ │ ├── node-ops.ts DOM 操作相关的工具函数,例如增删改查等操作。
│ │ ├── patch.ts 虚拟DOM的核心算法,用于对比新旧节点之间的差异,然后进行最小化的更新操作。
│ │ └── transition-util.ts 过渡动画相关的工具函数,例如获取元素的过渡状态等。
│ ├── runtime-with-compiler.ts 包含了编译器和运行时的代码,适用于需要在浏览器环境中编译和运行模板的情况,例如Vue.js 的开发版本。
│ └── util 针对Web平台的工具函数。
│ ├── attrs.ts 定义了处理元素属性的函数,主要用于处理 v-bind 指令绑定的属性。
│ ├── class.ts 定义了处理元素 class 的函数,主要用于处理 v-bind:class 和 v-bind:style 指令绑定的 class。
│ ├── compat.ts 定义了一些用于处理跨浏览器兼容性的函数。
│ ├── element.ts 定义了操作 DOM 元素的函数,例如获取元素的样式、设置元素的属性、移动元素等。
│ ├── index.ts util 目录的入口文件,导出了该目录下的所有工具函数。
│ └── style.ts 定义了处理元素样式的函数,主要用于处理 v-bind:style 指令绑定的样式。
├── shared
│ ├── constants.ts 公共常量。
│ └── util.ts 通用工具函数。
├── types 包含Vue的类型定义。
│ ├── compiler.ts 定义了编译器相关的类型
│ ├── component.ts 定义了组件相关的类型
│ ├── global-api.ts 定义了全局 API 的类型
│ ├── modules.d.ts
│ ├── options.ts 定义了 Vue 构造函数选项相关的类型
│ ├── ssr.ts 定义了服务器端渲染相关的类型
│ └── utils.ts 定义了一些通用的类型。
├── v3 包含Vue 3版本的API实现,但是这些API是实验性功能,不建议在生产环境中使用。
│ ├── apiAsyncComponent.ts 实现了异步组件的加载和使用。
│ ├── apiInject.ts 实现了 provide/inject API,用于在组件之间进行数据传递。
│ ├── apiLifecycle.ts 实现了 Vue 3 版本的生命周期函数。
│ ├── apiSetup.ts 实现了新的 setup 函数,用于替代 Vue 2 中的 created 和 mounted 函数。
│ ├── apiWatch.ts : 实现了新的 watch 函数,用于替代 Vue 2 中的 $watch 函数。
│ ├── currentInstance.ts 提供了全局的 currentInstance 对象,用于在组件内部访问当前组件实例。
│ ├── debug.ts 提供了调试工具函数。
│ ├── h.ts 提供了新的 h 函数,用于替代 Vue 2 中的 createElement 函数。
│ ├── index.ts Vue 3版本API的入口文件。
│ ├── reactivity 这个模块包含了 Vue 3 中的响应式系统实现
│ │ ├── computed.ts 实现了计算属性的实现,effect.ts 文件实现了副作用函数的追踪和调度
│ │ ├── effect.ts
│ │ ├── effectScope.ts 实现了副作用函数作用域的控制
│ │ ├── operations.ts 实现了基础操作方法的封装,如 hasChanged、trigger 等。
│ │ ├── reactive.ts 实现了基于 ES6 Proxy 的响应式数据绑定
│ │ ├── readonly.ts 文件实现了只读数据的处理
│ │ └── ref.ts 实现了对基础数据类型的响应式支持,如数字、字符串等
│ └── sfc-helpers 这个模块包含了一些 Vue 3 中单文件组件实现的辅助函数
│ ├── useCssModule.ts 实现了处理 CSS 模块的逻辑
│ └── useCssVars.ts 实现了处理 CSS 变量的逻辑。
└── vue.js (entry point)
https://new.cherrychat.org 不需要梯子,非常帅气的 GPT 镜像站,里面的 ChatGPT plus 模型就是官网 plus 的移植,可以联网对话,生成图片,价格也很便宜,可以试试。也内置最新的 gpt-4 -vison-preview 模型,支持上传图片对话,价格比普通 GPT4 还便宜一倍。
https://ttt.cherrychat.org 各类模型都有
694177779 欢迎加群交流