1.最前端｜详解VUE源码初始化流程以及响应式原理
2.qiankun 2.x 运行时沙箱 源码分析
3.vue源码分析(1)- new Vue
4.Clang前端源码分析
5.vue3源码分析——实现props,前端前端emit，事件处理等
6.微前端框架 之 qiankun 从入门到源码分析

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

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

       Vue 源码的前端前端入口是 src/core/instance/index.js，此文件负责在 Vue 的源码源码dobot arduino 源码 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 流程，开始响应式流程这条线。在阅读源码时，你总会被各种支线打断，这是没有办法的事情，只要你还记得之前在做什么就好。

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

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

       可以看到，也是unity源码知乎使用了 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 对新的值创建 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 对象，那么它是在什么地方执行的呢？下文会提到。

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

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

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

qiankun 2.x 运行时沙箱 源码分析

       本文详细解析了qiankun 2.x框架中的运行时沙箱，包括JS沙箱和样式沙箱的实现原理。沙箱在微前端解决方案中起着隔离作用，尤其是在single-spa框架基础上，qiankun解决了单个应用全局污染的问题。

       JS沙箱通过proxy代理window对象，记录其属性操作，微应用的所有操作都在这个proxy对象上，确保全局对象的干净。而样式沙箱则通过增强createElement和appendChild等方法，控制script、link、style标签的创建和添加，确保样式隔离，微应用卸载时能正确清理动态添加的python源码多文件样式。

       样式沙箱实际上是一个动态元素管理器，区分主应用和微应用的元素插入，并在微应用卸载后自动删除。它还额外处理了scoped css模式下的样式。深入源码分析部分，可以查看createSandboxJS、SingularProxySandbox和样式沙箱相关函数，如patchAtBootstrapping和patchDocumentCreateElement等。

       最后，虽然源码分析有一定难度，但持续学习和实践将使这些技术变得熟悉。感谢大家的反馈和支持，关注微信公众号“李永宁lyn”，获取最新内容。文章已收录至GitHub，欢迎关注和星标。

vue源码分析(1)- new Vue

       Vue.js 的核心思想是数据驱动，意味着视图由数据生成，修改视图不直接操作DOM，而是通过改变数据。与传统前端库如 jQuery 修改 DOM 的方式相比，数据驱动简化了代码量，尤其在交互复杂时，关注数据修改使逻辑清晰，DOM 变为数据映射，避免直接碰触 DOM，利于维护。

       使用 Vue 已有两年，专注于项目，未能深入理解及梳理源码。近期决定系统梳理 Vue 源码，并将系列文章发布，欢迎关注。

       今天探讨 Vue 实例化过程。当使用 `new Vue` 时，Vue 会执行 `_init` 方法。此方法在 `src/core/instance/init.js` 定义，主要分为四部分：参数初始化、选项合并、初始化生命周期、事件中心、渲染、数据、属性、计算属性等。

       若存在 `vm.$options.el`，将 `vm` 挂载至 DOM 节点，完成渲染，页面从 `{ { message}}` 变为 'Hello Vue'。疑惑在于数据如何渲染？答案在于初始化的第二部分，使用 `initState` 方法，其中 `initData` 负责处理 `data`，并代理数据至 `vm` 实例，通过 `proxy` 实现。当访问 `this.message` 时，实际上是访问 `this._data.message`。

       初始化最后检测 `el` 存在时，调用 `vm.$mount` 挂载，将模板渲染为 DOM。下章将分析 Vue 挂载过程。

       如有兴趣交流，微信号：，期待您的参与。

Clang前端源码分析

       Clang前端源码分析

       Clang，作为Apple公司的一款重要编译器，旨在取代GCC的地位，其设计独特，架构分为前端、优化器和后端三部分。这种架构使得新语言编译器的开发仅需关注前端，而优化器和后端可以保持通用，适应不同架构的编译只需调整后端部分。Clang的起源是Apple为摆脱GCC的限制，由Chris Lattner主导，基于LLVM架构创建的，初衷是提供一个更清晰、易扩展和高效的选择。

       在Xcode的演变中，从GCC 4.2版本后，LLVM-Clang逐渐取代了GCC的地位，尤其在Apple系统中，LLVM-Clang以其优点成为首选。Clang的模块化设计使得它在错误提示、IDE集成等方面表现优于GCC，尽管GCC支持更多语言和平台，但维护和性能不如Clang。如今，Clang在Android NDK中也逐渐占据主导，取代了部分GCC的职责，展示了其在编译领域的竞争力。

       如果你想深入了解Clang的源码解析，可以关注DriverOptTable的生成机制，特别是Driver::ParseArgStrings方法，它负责将命令行参数解析为ArgList，对参数进行合法性检查，确保编译器的正确运行。通过这些细节，可以更好地理解Clang编译器参数处理的复杂性和灵活性。

vue3源码分析——实现props,emit，事件处理等

       <>

       本期内容聚焦在 Vue 3 中实现 props、emit 以及事件处理的源码分析。为了详细了解这些功能的实现，请先回顾上一期的内容。

       在 Vue 3 的渲染函数中，可以通过 `this` 访问 setup 返回的内容，如 `this.xxx`，以及 `this.$el` 等其他属性。

       在进行测试用例时，需要预先在文档中创建一个 `app` 节点，以模拟实际的 DOM 环境。测试用例将模仿在 HTML 中定义的 `app` 节点。

       接下来，我们深入分析并解决两个具体需求：

       1. 在 `setupStatefulComponent` 函数中创建一个代理对象并绑定到 `instance` 中，当 `setup` 的返回结果为对象时，确保其存在于 `instance` 中，可以通过 `instance.setupState` 访问。

       2. 在 `mountElement` 函数中，当创建节点时，在 `vnode` 中绑定 `el`。同时，在 `setupStatefulComponent` 中的代理对象中判断当前的 `key`，确保在执行时已正确绑定 `el`。

       分析发现，`mountElement` 的执行顺序可能导致问题，即在 `setupStatefulComponent` 执行时 `vnode.el` 未赋值，导致后续操作失败。实际上，`render` 函数返回的 `subtree` 是一个 `vnode`，在 `patch` 后执行相关操作，可以解决这个问题。

       至此，测试用例可顺利通过。

       接下来，我们将探讨 Vue 中如何使用 `onEvent` 实现事件注册，以及其背后的实现逻辑。

       在 Vue 3 中，`onEvent` 提供了一种简洁的事件绑定方式。测试用例分析发现，关键在于处理 prop，判断属性是否符合特定格式，进而进行事件注册。通过在传入的 `el` 中添加一个属性 `el._vei` 来实现事件缓存。

       实现过程中，事件处理逻辑得到完善，确保了功能的正确实现。

       在 Vue 3 中，实现父子组件通信主要涉及 props 与 emit 的使用。通过分析测试用例，我们解决了以下问题：

       1. 在子组件的 `setup` 函数中使用 props 需要明确传入组件的 `props`。

       2. 在 `render` 中访问 `this` 的 `props` 需要在代理对象中添加相应的判断。

       3. 处理 `emit` 的异常情况，如报错，通过使用 `shallowReadonly` 包裹以确保只能读取。

       对于 `emit` 的实现，关键在于正确传入参数以及处理事件名的格式转换。问题得到解决后，测试用例运行顺畅。

       至此，我们完成了 Vue 3 中 props、emit 及事件处理的源码分析与实现。通过深入理解 Vue 3 的组件系统，我们能够更高效地构建具有交互性的前端应用。

微前端框架 之 qiankun 从入门到源码分析

       微前端框架 qiankun 是单页应用框架single-spa的优化版本，它旨在解决single-spa在构建微前端架构时遇到的问题，如强侵入性打包和状态维护的不足。理解qiankun前，最好先对single-spa有深入认识，以便带着问题去剖析源码。

       single-spa虽然简单，但存在几个显著问题，如需将微应用打包成单个JS文件，影响了打包优化，且微应用发布时配置调整频繁。qiankun通过二次封装，解决了这些问题，使得微前端的构建和维护更为便捷。

       qiankun 2.0.版本的源码分析全面深入，其优势在于提供了完整的示例项目和解决方案，避免用户重复踩坑。文章按主题拆分，让你逐步理解框架结构、主应用配置和微应用接入。源码中，loadApp方法被认为是核心，涉及样式隔离、通信机制等内容。

       通过本文，你将学会如何从零开始使用qiankun，以及如何解析其内部实现。继续深入研究，你可以探索样式隔离的两种方式、预加载策略以及应用间通信机制。阅读qiankun源码可能需要反复阅读和讨论，但定会有收获。

       最后，文章已收录到GitHub，你可以通过关注微信公众号获取最新更新。感谢您的点赞、收藏和评论，期待下期内容的互动。学习如溪水长流，成为习惯，知识自然成常。

微前端qiankun沙箱实现源码解读

       在上篇文章中，我们讨论了微前端实现沙箱的几种方式。接下来，我们将深入解析qiankun中的沙箱实现。qiankun主要包含三种沙箱：snapshotSandbox、legacySandbox以及proxySandbox。这些沙箱的代码主要位于qiankun的sandbox文件夹中。

       首先，我们来看一下legacySandbox单实例沙箱。这个沙箱基于Proxy实现，适用于兼容性要求较高的场景。它通过记录新增和修改的全局变量，确保在激活和失活沙箱时能够正确地还原主应用和子应用的状态。具体的实现代码中，它使用了Object.getOwnPropertyDescriptor和Object.defineProperty等方法来操作window对象。

       接着，我们讨论proxySandbox多实例沙箱。这个沙箱同样基于Proxy实现，但它是多实例的。为了实现多实例功能，它创建了一个fakeWindow对象，并对该对象进行了代理。这个代理对象不仅处理了设置和获取属性的操作，还重新定义了诸如as、ownKeys、getOwnPropertyDescriptor、defineProperty、deleteProperty等方法，以确保沙箱的健壮性和完整性。proxySandbox特别之处在于，它只允许document和eval对象在多个实例间共享。

       最后，我们来看一下snapshotSandbox快照沙箱。这个沙箱基于diff方式实现，主要用于不支持Proxy的低版本浏览器。它通过记录当前快照，激活时记录变更的属性，失活时恢复环境。由于所有属性都保留在window上，因此它只能是单实例。

       通过以上分析，我们可以看到qiankun在实现沙箱时考虑到了多种情况，以确保在不同环境下的良好表现。这些沙箱各自有不同的特点和适用场景，共同为微前端的实现提供了强大的支持。

前端工程师源码分享:html5 2d 扇子

       折扇，一种古老而精美的艺术品，以其独特的折叠设计和精巧的工艺，成为文化与美学的载体。在现代，随着科技的发展，折扇也以另一种形式呈现于我们的视野中——通过HTML5 2D canvas技术，我们能够创造出动态、交互式的折扇，使其在数字世界中绽放出新的生命力。

       HTML5 2D canvas是一种在网页上绘制图形和动画的工具，通过JavaScript操作canvas，我们可以实现复杂的图形渲染、动画效果以及交互功能。对于折扇的模拟，我们首先需要定义扇骨和扇面的基本形状。在canvas上，使用fillRect和arc等方法绘制扇面，使用lineTo和moveTo创建扇骨结构。通过调整这些形状的大小、位置和颜色，我们可以逐步构建出一个逼真的折扇。

       在设计动态交互时，我们可以利用JavaScript的定时器和事件监听器，实现折扇的展开和折叠。例如，当用户点击屏幕上的特定区域时，折扇的某一部分将开始移动，模拟实际折扇开合的过程。通过调整动画的速度和流畅度，可以增加用户与作品的互动体验，让折扇在数字世界中展现出更加生动和丰富的表现力。

       除了静态和动态效果，我们还可以在折扇上添加更多的元素和功能，如背景动画、音效、甚至与用户互动的游戏元素。例如，当用户点击折扇的不同部分时，可以触发特定的动画或播放特定的音效，增加作品的趣味性和互动性。同时，通过在折扇上添加文字、图案或其他视觉元素，可以丰富其内容，使其成为传达信息、展示艺术创意的平台。

       通过HTML5 2D canvas技术，折扇不仅可以在数字世界中重现其传统美学，还能够通过动态交互和多媒体元素的融入，展现出现代科技与传统文化的完美结合。这一过程不仅有助于我们学习和掌握HTML5 2D canvas的使用，还激发了创意，丰富了数字艺术的表现形式。

Vue3源码解读-目录结构及构建版本解析

       本文基于Vue3版本3.3.4进行解读，旨在深入解析其目录结构及构建版本。

       目录结构方面，首先将源代码克隆至本地，接着在终端执行命令 "tree -aI ".git*|.vscode" -C -L 2"，获取到清晰的目录结构。此命令会以彩色输出目录及其子目录结构，忽略.git文件和目录以及.vscode目录，仅展示至第二层。

       模块依赖关系图中，Vue3源码主要位于packages目录下。通过分析模块间的调用关系，可以绘制出相应的模块关系图。重点关注分析的包包括@vue/reactivity、@vue/runtime-core、@vue/compiler-core等。

       构建版本解析方面，通过执行构建命令可生成Vue3所有版本。构建结果位于core\packages\vue\dist目录下，包含多个文件，不同版本适用于不同场景。

       Vue3源码采用pnpm实现monorepo管理，将不同功能模块分开管理，提高了代码的结构化和可维护性。这一方式带来多方面优势，例如易于模块化、方便版本控制等。

       相关参考资料包括Vue官网、Vuejs设计与实现、以及关于不同构建版本的资料。

       如需了解更多内容，欢迎关注公众号：前端Talkking