1.一步步解读VUE3源码系列14 - component 主流程初始化
2.Nginx源码分析 - 主流程篇 - 全局变量cycle初始化
3.最前端｜详解VUE源码初始化流程以及响应式原理
4.Vue2.6源码（1）：浅析Vue初始化过程
5.Tomcat源码分析— Bootstrap启动流程
6.MMDetection3D之DETR3D源码解析：整体流程篇

一步步解读VUE3源码系列14 - component 主流程初始化

       今天让我们深入探讨Vue3源码的源码component主流程初始化过程，专注于render虚拟节点的流程构建，随后会涉及template编译部分。源码

       直接进入核心内容:

       首先，流程创建一个简单的源码项目结构，包括example/helloworld文件夹，流程网页源码添加图片以及App.js、源码index.html和main.js文件。流程

       index.html文件是源码页面的入口点，main.js负责加载并初始化应用。流程

       在App.js中，源码我们的流程目标是看到"hello,mini-vue"的输出。

       接下来，源码我们按照Vue3源码的流程思路一步步构建组件初始化流程：

       index.ts文件暂时不做处理，留作后续扩展。源码

       creatApp.ts负责处理组件模板，这是初始化的关键步骤。

       render.ts、vnode.ts和component.ts这三个文件分别对应渲染过程中的核心组件，方法和命名都遵循Vue3的设计。

       整个流程图展示了组件初始化的逻辑顺序，我们还会在这个基础上进行优化。

       如果你对这个系列感兴趣，可以访问我的GitHub地址，star或fork代码，共享学习成果。

Nginx源码分析 - 主流程篇 - 全局变量cycle初始化

       Nginx的全局初始化过程围绕全局变量“cycle”展开，位于/src/core/cycle.c文件，其数据结构为“ngx_cycle_t”。了解Nginx源码前应掌握cycle全局变量初始化流程。

       cycle初始化分为以下步骤：

       创建内存池

       用于后续分配的所有内存。

       拷贝配置文件路径前缀

       如“/usr/local/nginx”，存储在cycle->conf_prefix中。

       复制Nginx路径前缀

       存储于cycle->prefix。

       复制配置文件信息

       包含文件路径，如“/nginx/conf/nginx.conf”。

       复制配置参数信息

       初始化路径信息

       初始化打开的文件句柄

       初始化shared_memory链表

       新旧链表比较，保留相同内存，释放不同。

       遍历并打开文件列表（如日志、配置文件）

       创建并初始化共享内存

       比较新旧共享内存，保留或创建。

       处理listening数组并开始监听

       处理socket监听。

       关闭或删除old_cycle资源

       关键点在于内存池的创建、配置文件解析、文件句柄与共享内存的初始化、socket监听与资源关闭，整个流程确保Nginx核心组件的xnovaone源码初始化完成。

最前端｜详解VUE源码初始化流程以及响应式原理

       为大家分享一些实用内容，便于大家理解，希望对大家在 Vue 开发中有所助益，直接进入正题：

       Vue 源码的入口是 src/core/instance/index.js，此文件负责在 Vue 的 prototype 上注册函数属性等，并执行 initMixin 中注册的 _init 函数。

       继续观察流程，_init 方法代表初始化流程，主要代码如下：

       如果是组件，则 _isComponent 为真，其他情况下都会执行 resolveConstructorOptions，该函数将用户设置的 options 和默认 options 合并。随后执行一系列初始化函数，如 initLifecycle 初始化生命周期，initEvent 初始化事件处理机制，initRender 初始化 vnode、插槽及属性等。接下来调用 beforeCreate 钩子函数，然后是 initInjections 和 initProvide 两个与通信相关的组件。

       这里涉及到两个熟悉的生命周期函数：beforeCreate 和 created。对比 Vue 流程图，可以明确这两个钩子函数的执行时机。

       它们之间实际上差了三个初始化过程。重点是 initState 方法：

       在此方法中，如果传入 data 则执行 initData，否则初始化一个空对象。接下来可以看到 computed 和 watch 也是在这里初始化的。

       简化后的 initData 代码：

       此方法首先判断 data 是否为函数，若是则执行，否则直接取值，因此我们的 data 既可以函数，也可以是对象。然后循环 data 的 key 值，通过 hasOwn 判断属性是否有重复。

       isReserved 方法是判断变量名是否以 _ 或 $ 开头，这意味着我们不能使用 _ 和 $ 开头的属性名。然后进入 proxy 方法，该方法通过 Object.defineProperty 设置 get 和 set 将 data 的属性代理到 vm 上，使我们能够通过 this[propName] 访问到 data 上的属性，而无需通过 this.data[propName]。最后执行 observe，如下：

       前面都是在做一些初始化等必要的判断，核心只有一句：

       从这里开始，我们暂时中止 init 流程，开始响应式流程这条线。在阅读源码时，你总会被各种支线打断，iofstream源码这是没有办法的事情，只要你还记得之前在做什么就好。

       Observer 类是 Vue 实现响应式最重要的三环之一，代码如下：

       这里介绍一下 def 函数，这是 Vue 封装的方法，在源码中大量使用，我们可以稍微分析一下，代码如下：

       可以看到，也是使用了 Object.defineProperty 方法，上文提到过。这是一个非常强大的方法，可以说 Vue 的双向绑定就是通过它实现的。它有三个配置项：configurable 表示是否可以重新赋值和删除，writable 表示是否可以修改，enumerable 表示该属性是否会被遍历到。Vue 通过 def 方法定义哪些属性是不可修改的，哪些属性是不暴露给用户的。这里通过 def 方法将 Observer 类绑定到 data 的 __ob__ 属性上，有兴趣的同学可以去 debugger 查看 data 和 prop 中的 __ob__ 属性的格式。

       再说回 Observer，如果传入的数据是数组，则会调用 observeArray，该函数会遍历数组，然后每个数组项又会去执行 observe 方法，这里显然是一个递归，目的是将所有的属性都调用 observe。这个 observe 方法实际上是 Vue 实现观察者模式的核心，不仅是在初始化 data 的时候用到。最终，data 上的每个属性都会走到 defineReactive 里面来，重点就在这里：

       这个方法的作用是将普通数据处理成响应式数据，这里的 get 和 set 就是 Vue 中依赖收集和派发更新的源头。这里又涉及到了响应式另一个重要的类：Dep。

       在这段代码中，通过 Object.getOwnPropertyDescriptor 获取对象的属性描述符，如果不存在，则通过 Object.defineProperty 创建。这里的 get 和 set 都是函数，因此 data 和 prop 中所有的值都会因为闭包而缓存在内存中，并且都关联了一个 Dep 对象。

       当用户通过 this[propName] 访问属性时，就会触发 get，并调用 dep.depend 方法（下面的 dependArray 实际上就是递归遍历数组，然后去调用那个数据上的 __ob__.dep.depend 方法），当赋值更新时，则会触发 set，并调用 observe 对新的secs源码值创建 observer 对象，最后调用 dep.notify 方法。

       总结起来就是，当赋值时调用 dep.notify；当取值时调用 dep.depend。这个方法的作用就在于此，剩下的工作交给了 Dep 类。

       接下来我们可以看一下 Dep 类中做了什么。

       这里多贴了一些代码，虽然不属于同一个类，但非常重要。这段代码初始化了一个 subs 数组，这个非常熟悉的数组就是我们经常在 Vue 的属性中看到的，它是一个观察者列表。

       前文提到，当 key 的 getter 触发时会调用 depend，将 Dep.target 添加到观察者列表中。这样，在 set 的时候我们才能 notify 去通知 update。

       另外，还要提一点，前面在设置 getter 时的代码中有这样一段：

       那么既然已经执行了 dep.depend，为什么还要执行 childOb.dep.depend，这又是什么东西呢？

       实际上，在数据的增删改查中，响应式的实现方式是不同的。setter 和 getter 只能检测到数据的修改和读取操作，因此这部分是由 dep.depend 来实现的。而 data 的新增删除的属性，并不能直接实现响应式，这部分是由 childOb.dep.depend 来完成的，这就是我们常用的 Vue.set 和 Vue.delete 的实现方式。

       接着往下看，我们发现 depend 方法将 Dep.target 推入 subs 中。在上面定义中可以看到，它是一个 Watcher 类的实例，这个类就是响应式系统中的最后一环。

       不过，我们暂时不管它，在这里还有一个重要的点：targetStack。可以看到有 pushTarget 和 popTarget 这两个方法，它们遵循着栈的原则，后进先出。因此，Vue 中的更新也是按照这个原则进行的。另外，大家可能注意到，这里似乎没有实例化 Watcher 对象，那么它是005源码在什么地方执行的呢？下文会提到。

       Watcher 的代码很长，我们这里只看一小段。当 notify 被触发时，会调用 update 方法。需要注意的是，这部分已经不是在 init 的流程中了，而是在数据更新时调用的。

       这里正常情况下会执行 queueWatcher：

       可以看到，当 data 更新时会将 watcher push 到 queue 中，然后等到 nextTick 执行 flushSchedulerQueue，nextTick 也是一个大家很熟悉的东西，Vue 当然不会蠢到每有一个更新就更新一遍 DOM。它就是通过 nextTick 来实现优化的，所有的改动都会被 push 到一个 callbacks 队列中，然后等待全部完成之后一次清空，一起更新。这就是一轮 tick。

       言归正传，接着来看 flushSchedulerQueue：

       实际核心代码就是遍历所有的 queue，然后执行 watcher.run，最后发出 actived 和 updated 两个 hook。

       watcher.run 会更新值然后调用 updateComponent 方法去更新 DOM。至此，响应式原理的主体流程结束。说了这么多，其实下面这个流程图就能完整概括。

       我们回到 init 的流程，上文中 init 的流程并没有执行完，还差这最后一句：

       即通过传入的 options 将 DOM 给渲染出来，我们来看 $mount 的代码。

       前面是在获取元素以及进行一系列的类型检查判断，核心就在 compileToFunctions 这个方法上。

       看到这个 ast 我们就应该知道这个函数的作用了，通过 template 获取 AST 抽象语法树，然后根据定义的模板规则生成 render 函数。

       这个方法执行完之后返回了 render 函数，之后被赋值在了 options 上，最后调用了 mount.call(this, el, hydrating)。

       这个方法很简单，就是调用 mountComponent 函数。

       这里的流程很容易理解。首先触发 beforeMount 钩子函数，然后通过 vm._render 生成虚拟 DOM（vnode）。这个 vnode 就是常说的虚拟 DOM。生成 vnode 后，再调用 update 方法将其更新为真实的 DOM。在 update 方法中，会实现 diff 算法。最后执行 mounted 钩子函数。需要注意的是，这里的 updateComponent 只是定义出来了，然后将其作为参数传递给了 Watcher。之前提到的 Watcher 就是在这个地方实例化的。

       至此，init 的主体流程也结束了。当然，其中还有很多细节没有提到。我也还没有深入研究这些细节，之后有时间会进一步理解和梳理。这篇文章主要是为了自己做个笔记，也分享给大家，希望能有所帮助。如果文中有任何错误之处，请大家指正。

       版权声明：本文由神州数码云基地团队整理撰写，若转载请注明出处。

       公众号搜索神州数码云基地，了解更多技术干货。

Vue2.6源码（1）：浅析Vue初始化过程

       Vue2.6初始化过程详解

       当我们new一个Vue对象时，这个过程包含了初始化的核心步骤。虽然细节繁多，但本文将从全局流程展开，后续会逐步解析深入细节。请持续关注，获取更多内容。

       新项目中常见的初始化代码如下：

       首先，我们来探究import的Vue从何而来。在Vue的package.json中，可以看到关键配置。通常情况下，import 'vue'会加载main或module对应的js文件。若使用webpack，别名设置可能影响引入文件。

       导入的App组件是什么？Vue项目中的xxx.vue文件，实际上是一个Vue实例。浏览器无法直接识别template，Vue实例负责转化这些内容并渲染到DOM中。App组件就是新创建的Vue实例，它构建了页面的主体。

       标签#app的作用在于，Vue实例转化的组件最终会替换页面上id为app的DOM元素。

       new Vue背后发生了什么？_init方法是关键，它负责将Vue原型和构造函数的能力整合，并在$mount方法中完成实例化和挂载过程。

       _init方法执行了三个主要任务：一是继承父构造函数的能力，二是添加实例所需的各种功能，三是通过$mount方法将实例与DOM关联。$mount方法的核心是调用render函数并挂载到指定的DOM节点。

       关于$mount方法的详细解析，将在后续文章中展开。在此阶段，理解Vue的初始化过程包括：在实例上添加功能、通过$mount挂载组件为DOM。希望这些信息能帮助你深入理解Vue的初始化流程。如果你对源码或相关技术有兴趣，欢迎关注我的GitHub和微信订阅号“杨艺韬的网络日志”进行进一步交流。

Tomcat源码分析— Bootstrap启动流程

       在探讨Tomcat启动流程之前，需要理解其组件及其周期状态，这为后续深入学习组件初始化与启动等提供了基础。

       实现Lifecycle接口的组件拥有种状态。Bootstrap作为Tomcat启动入口类，负责构造类加载器以加载Catalina内部类，通过查找catalina.home目录下所有jar包，确保安全地加载应用程序类。

       通过Bootstrap的main方法启动Tomcat实例，主要步骤包括创建Bootstrap对象、调用init方法，并根据启动参数执行load和start方法。

       Bootstrap的init方法初始化类加载器，使得Tomcat能加载应用程序类，同时设置当前线程上下文加载器为CatalinaLoader。initClassLoaders方法创建三种类加载器，其中catalinaLoader与sharedLoader的父加载器为commonLoader。完成初始化后，预加载tomcat和javax包下的自定义类，避免访问权限异常。

       调用catalinaLoader加载器加载Catalina类，通过反射实例化对象，并设置sharedLoader实例作为入参，最后将实例化的Catalina对象赋予catalinaDaemon成员变量。

       Tomcat组件的初始化主要在load方法中完成，通过反射调用Catalina的load方法，构建并初始化StandardServer及其子组件。Bootstrap.load方法通过反射调用Catalina的load方法，Catalina的load方法实现序列图中的逻辑，初始化配置文件解析器Digester，构建standardServer实例，绑定当前catalina实例，设置根路径，并调用init方法完成初始化。

       Tomcat中的容器或组件使用模板方法设计模式，子类通过重写LifecycleBase抽象类的模板方法initInternal实现初始化逻辑。LifecycleBase的init方法主要完成两件事：调用父类的LifecycleBase#init方法，由standerServer#initInternal方法执行实际初始化。init方法逻辑包括：执行LifecycleBase#initInternal抽象方法，由standardServer#initInternal方法完成初始化。

       service组件的init方法主要初始化Connector连接器，连接器的初始化尤为重要。不同协议处理器如AjpAprProtocol、HttpNioProtocol的初始化流程将在后续文章中单独讲解。

       Bootstrap类的main方法通过反射执行catalina实例的start方法，启动standardServer实例，使其监听端口并接收新请求。start方法主要逻辑包括启动Service、Engine容器、Executor执行器、MapperListener监听器、Connector连接器等组件。当启动成功后，创建并监听端口，Tomcat对外提供服务。

       总结，Tomcat的启动流程清晰且依赖模板方法与责任链设计模式，理解这两种模式有助于更好地理解启动过程及代码。启动过程首先初始化各组件，如Server、Service、Engine容器、虚拟主机Host、上下文Context、Executor执行器、Connector连接器等，然后按顺序启动组件，成功后监听端口提供服务。

MMDetection3D之DETR3D源码解析：整体流程篇

       关于torch.distributed.launch的更多细节： blog.csdn.net/magic_ll/...

       设置config file和work dir，work dir保存最终config，log等信息，work dir默认为path/to/user/work_dir/

       作者将自定义的部分放在 'projects/mmdet3d_plugin/' 文件夹下，通过registry类注册模块，这里利用importlib导入模块并初始化自定义的类。

       这里设置模型的输出信息保存路径、gpus等模型的运行时环境参数

       这里初始化模型，初始化train_dataset和val_dataset

       这部分完成了DataLoader的初始化，runner和hooks的初始化，并且按照workflow运行runner。

从源文件到可执行文件得过程是什么？

       从源文件到可执行文件，主要经历四个关键步骤：预处理、编译、汇编、链接。源文件，如 C 语言程序，经过预处理，替换包含命令和宏定义，转换生成新的程序文本，然后进行编译，此阶段会涉及到词法分析、语法分析、语义分析及优化，最终输出汇编代码。汇编器将汇编指令转换成目标机器可执行的机器指令，生成目标文件。最后，链接器将目标文件与可能需要的库文件链接，解决符号引用，生成可执行文件。

       编译过程主要分为以下五部分：

       1. **词法分析**（Lexical Analysis）：将源代码分解为有意义的词素（Lexeme）。

       2. **语法分析**（Syntax Analysis）：构建树型的中间表示形式，通常是语法树。

       3. **语义分析**（Semantic Analysis）：检测源程序是否符合语法规则，并收集类型信息。

       4. **中间代码生成和优化**：生成类机器语言的中间代码，然后优化此代码。

       5. **代码生成**：将中间代码映射到目标机器语言。

       在实际使用编译器 GCC 进行编译时，可针对不同阶段执行特殊操作。预处理阶段通过命令 `-E` 单独执行。编译阶段则通过 `-S` 选项控制。汇编过程通常在编译阶段内部处理，用户无需显式命令。链接阶段通过 `-c` 或 `-S` 选项进行，根据目标文件的来源自动生成链接操作。链接中可选择静态或动态链接，使用 `-static` 指令指定静态链接。

       理解从源代码到可执行文件的这一流程，有助于深入掌握编程语言的编译原理和实际应用过程，对嵌入式物联网开发等技术领域大有裨益。以上过程强调了程序从高级语言转换到可运行机器语言的关键步骤，为开发者提供了一个坚实的基础。

vue源码阅读解析1- new Vue初始化流程

       在 Vue 2.6. 版本中，初始化过程从一个简单的HTML文件引入Vue开始。核心在于 src/core/instance/index.js 和 src/core/instance/init.js 文件，其中定义了一个名为的方法，当执行 new Vue(options) 时，会调用这个方法进行实例化。

       重点在于理解 $mount 方法，它在 src/platforms/web/entry-runtime-with-compiler.js 中被实现，主要负责将模板编译成可识别的render函数，这对于模板编写和Vue的编译效率至关重要。当使用模板时，Vue会自动编译，而直接写render函数会更高效。

       继续深入，src/core/instance/lifecycle.js 的 mountComponent 方法有两个 $mount，一个用于with-compiler模式，负责模板编译阶段的处理；而其他情况下，template会被Webpack和loader处理并编译。

       在 mountComponent 方法中，创建渲染watcher，watcher内部调用updateComponent。watcher实例化时，vm._watcher = this，接着执行get函数，实际上是执行updateComponent，从而生成Vnode。

       然后进入vm.update函数，进一步调用patch方法，该方法在src/core/vdom/patch.js中，这是new Vue初始化流程的最终步骤。

[Vue源码系列-5]vue3初始化流程原理

       在Vue3的模块结构中，runtime-dom模块专门负责解决浏览器运行时的DOM操作，提供了丰富的DOM属性和节点操作接口。

       patchProp功能针对不同属性提供特定的patch操作，确保对DOM元素属性的修改在浏览器中的表现准确无误。

       runtime-dom的modules文件夹下包含各种patch的实现原理，这些patch操作负责处理不同场景下DOM元素的更新。

       在nodeOps模块中，所有与节点相关的操作方法得到妥善存储，为后续DOM操作提供了便捷的入口。

       runtimeDom模块中声明了createApp函数，用户通过调用此函数，即可启动Vue3应用的渲染流程。

       同时，runtime-core作为与平台无关的通用代码，主要负责定义API和核心逻辑，其下包含renderer.ts和apiCreateApp.ts等关键文件，这些文件承载着Vue3渲染器的核心功能和应用创建的逻辑。