皮皮网

1.vue runtime源码分析学习——day4：createApp
2.Vue3源码系列（七）：createApp— 一切的优源码起源
3.Vue3源码系列 (一) watch
4.vue3源码分析——实现props,emit，事件处理等
5.Vue源码解析(2)-$mount实现
6.Vue3源码细读——ref

vue runtime源码分析学习——day4：createApp

       在深入研究vue runtime源码时，秀项项目我们首先确定了分析的目源码路径和方法。

       createApp这个关键入口点位于@vue/runtime-dom包中，优源码它是秀项项目开发者项目启动的起点。

       在开始代码分析前，目源码驱动在线检测源码我们选择在packages\vue\__tests__\index.spec.ts中的优源码测试用例进行，通常选择第一个即可，秀项项目因为这里模拟的目源码是客户端环境，但需确保testEvironment配置正确并配合jsdom库使用。优源码

       createApp方法内部包含一些开发环境特有的秀项项目检查，如injectCompilerOptionsCheck和injectNativeTagCheck，目源码它们在生产环境不会执行。优源码通过Object.defineProperty绑定，秀项项目可以防止这些检查被意外修改。目源码

       createApp的主要任务包括调用ensureRenderer、createAppApi和mount等。其中，ensureRenderer涉及到typescript的重载，而createAppApi则是通过缓存render和hydrate方法，优化性能。

       在render部分，我们首次遇到reload，这是与vue-loader中热更新功能的联系点。尽管loader中的reload方法不接受参数，但它们本质上是处理相同逻辑的。

       mount方法的核心内容是将js代码转化为DOM，它会处理createVNode和vnode的生成，以及与container._vnode的更新和比对，即旧vnode与新vnode的差异处理。

       虽然今天的php博客首页源码内容可能略显琐碎，但createApp的总体流程已经清晰了。后续将继续深入解析其他关键部分。

Vue3源码系列（七）：createApp— 一切的起源

       在使用Vue3构建前端项目时，我们经常在main.js/main.ts中通过createApp这个API创建应用程序实例。这篇文章将深入探讨createApp背后的故事。首先，让我们了解几个关键的类型：

App: createApp返回的实例，包含了项目常用方法，链式调用友好，兼容Vue2的filter，并提供了内部属性。

AppConfig: 应用配置，包含Vue2中常见的选项，如组件合并策略、全局属性和编译器设置等。

AppContext: 上下文对象，记录组件、指令等信息，支持热更新和Vue2 filter的兼容。

Plugin: 与Vue2类似，Plugin和install方法定义清晰，可以是函数或对象。

CreateAppFunction: createApp函数的类型，接受根组件和可选的根组件属性。

       实际上，Vue3的起点在于createApp API，它定义在packages/runtime-dom/src/index.ts。我们从这里开始追踪其内部流程：

createApp: 乍看之下，createApp似乎在renderer上，它由createRenderer创建。飞天涨停密码源码createRenderer在packages/runtime-core/src/renderer.ts中定义，调用baseCreateRenderer，这个函数包含diff操作方法，但核心的createApp源自createAppAPI。

createAppAPI: 在baseCreateRenderer的返回值中，createAppAPI接收render和hydrate方法，将它们组合成我们熟知的createApp。这个函数约行，逻辑清晰地构造了应用实例。

       虽然我们已经了解了createApp的基本创建过程，但render函数的详细过程尚未揭示。后续会进一步剖析render的执行机制。

Vue3源码系列 (一) watch

       本文深入解析 Vue3 中 watch 的机制。首先，我们了解 watch 接收三个参数：监听的数据源 source、回调 cb 以及可选的 options。options 包括 immediate、deep、flush、onTrack 和 onTrigger，用于控制立即执行、深度监听、回调时机以及收集依赖和触发更新时的自定义函数。回调 cb 接收 value、oldValue 和 onCleanUp 参数，用于执行特定操作，如响应表格页码变化重新请求数据，并在副作用清理时调用 onCleanUp 函数。

       watch 支持监听单个数据或多个数据，其参数类型包括 WatchSource、如何提高框架源码响应式对象、MultiWatchSources 和 Readonly。单个数据源可以是 WatchSource 或响应式的对象，多个数据源则为 MultiWatchSources 或 Readonly。

       watch 的核心在于 doWatch 函数，它接收与 watch 类似的参数。在源码中，doWatch 负责实现 watch 的逻辑。首先，它会检查是否提供了回调函数 cb。如果没有，且 options 中设置了 immediate 和 deep，会抛出警告，因为这些选项只对有回调的 doWatch 签名有效。接着，设置 getter，并配置强制触发和深度监听。根据 source 的类型，doWatch 进行不同的处理。

       在处理源数据后，doWatch 会创建 effect，这是 Vue3 中实现响应式的关键。effect 通过 getter 获取当前值，然后在回调函数中使用 newValue 和 oldValue。这使得 watch 能在数据变化时触发回调函数，执行相应的操作。

       总结，本文详细阐述了 Vue3 中 watch 的工作原理，从参数类型、回调函数到核心实现 doWatch 函数，快手网络直播源码全面深入地解析了 watch 的机制，帮助开发者更好地理解和运用 Vue3 的响应式特性。通过本文，读者可以深入了解 Vue3 watch 的内部工作流程，为构建高效、响应式的 Vue 应用提供技术支持。

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 的组件系统，我们能够更高效地构建具有交互性的前端应用。

Vue源码解析(2)-$mount实现

       在上一节中，我们了解到Vue实例的创建过程中，构造函数会执行_init()函数，其中关键步骤是调用vm.$mount(vm.$options.el)，这标志着实例已开始挂载到DOM。$mount是Vue渲染的核心函数。

       本章节我们将深入探讨Vue的渲染过程，但会跳过一些细节，以便在后续章节中详细剖析。首先，理解Vue的两种构建方式是关键：独立构建（包含template编译器）和运行时构建（不包含模板编译器）。独立构建支持服务端渲染，而运行时构建体积更小。

       接下来，我们开始分析Vue源码。$mount方法的实现与平台和构建方式相关，这里我们关注运行时版本。在src/platforms/web/entry-runtime-with-compiler.js中，$mount被添加到Vue原型上，它接收el参数，可能是字符串或DOM元素。

       当el为字符串时，会通过query方法将其转换为DOM节点。然后判断el不能为body或html，以防止意外覆盖。如果没有render函数，会根据template生成render，同时处理多模板形式。getOuterHTML函数获取el的内容和DOM。

       $mount最终调用mount函数，这个过程涉及核心的mountComponent方法，生成虚拟Node并实例化渲染Watcher，其回调中调用updateComponent更新DOM。这部分在core/instance/lifecycle.js中，会检查render函数并处理特殊情况，如未定义或使用template语法的runtime-only版本。

       updateComponent是渲染和更新的核心函数，由Watcher（在'src/core/observer/watch.js'定义）在数据变化时调用。Watcher在初始化时执行回调，当数据更新时也执行。整个过程体现了观察者模式，$mount中调用updateComponent的过程涉及template到render的转换，以及初次渲染或数据变更时的调用。

       虽然我们已经概述了$mount的流程，但关于render函数的编译步骤并未深入讲解。编译过程包括添加web平台特性、解析template为AST、优化节点、生成render函数字符串并缓存。下一节将详细剖析这五个步骤的源码实现，敬请期待。

Vue3源码细读——ref

       深入解析Vue3中ref的实现细节

       在Vue3源码中，ref相关功能主要集中在'packages/reactivity/src/ref.ts'文件里。

       在该文件中，ref的使用与处理主要依赖于最后一个函数的调用：`createRef(value, false)`。通过此函数，可以创建或更新ref实例。

       接下来，让我们深入探讨`createRef`函数。它首先判断传入的参数是否已经是一个ref实例，如果是，则直接返回；否则，将返回一个`RefImpl`实例。进一步了解`RefImpl`构造函数，我们发现它包含了`isShallow`和`isReadonly`两个关键属性，它们负责判断ref实例的浅度和是否为只读。

       通过阅读源码，我们了解到在控制台log中出现的`_value`和`_rawValue`函数。这些函数用于方便进行判断和对比，尤其是`_rawValue`记录了ref的原始值，以避免不必要的更新，比如在值未发生变化时，节省了性能损耗。实践一下，例如页面上的button点击修改值，然后使用watch监控ref，你会发现watch并未执行。

       在源码中，还隐含了`trackRefValue`和`triggerRefValue`两个函数。它们分别在`ref.ts`文件内声明，分别负责跟踪和触发ref值的变化。

       让我们继续深入到`trackRefValue`函数，它主要负责跟踪ref值的变化。`activeEffect`的概念在这里出现，它在ref的读取操作中扮演关键角色。当值发生变化时，Vue通过关联`activeEffect`实现响应式更新。具体来说，当我们进行第一次读取时，会将这种关联关系存储起来（通常使用Set数据结构）。改变值时，通过这些关联进行更新（响应式），达到响应式效果。

       至此，关于Vue3中ref源码的解读暂时告一段落。如果有任何错误或需要进一步讨论的地方，欢迎大神们指出，同时，我也期待着自己的进步。