1.Vue3 源码中实例挂载（mount）过程
2.vue/compiler-sfc源码分析学习--part2:如何处理script--day5
3.vue3源码学习--编译阶段汇总
4.Vue3源码系列 (四) ref
5.vue3源码分析——实现props,源码emit，事件处理等
6.vue3.2 源码浅析：createApp、源码mount

Vue3 源码中实例挂载（mount）过程

       上篇文章介绍了如何创建Vue3组件实例，源码创建实例后，源码需调用mount方法将其挂载到页面上。源码整个组件挂载流程分为开始安装与结束安装两个阶段。源码溯源码特架

       核心函数setupComponent将上述流程集成，源码它包含开始安装与结束安装两部分。源码开始安装阶段，源码主要任务是源码初始化props与slots。当组件具有状态时，源码执行setupStatefulComponent，源码调用setup函数配置组件状态与行为。源码

       在Vue3中，源码setup函数负责定义组件的源码状态与行为。对于状态组件，setup函数返回包含state、props与context等属性的对象。

       setupStatefulComponent函数设置组件实例，调用setCurrentInstance，并在实例回溯前暂停依赖收集，创建Proxy对象，随后恢复依赖收集。此举旨在避免setup函数内产生不必要的依赖收集。

       通常，setup函数返回对象，源码冻结期执行handleSetupResult函数验证返回值是否符合规范。

       开始安装阶段，先初始化props与slots，随后处理状态组件。结束安装阶段，初始化computed、data、watch、mixin与生命周期等。

       handleSetupResult确保setup返回值有效。applyOptions函数处理配置选项与初始化工作，确保组件初始化阶段具备有效的渲染函数，支持选项API，并在开发环境下提供警告信息。

       总结，组件挂载流程分为开始与结束两个阶段，分别处理初始化与配置工作，确保组件在页面上正确显示。

vue/compiler-sfc源码分析学习--part2:如何处理script--day5

       在vue/compiler-sfc源码分析学习系列的part2中，我们深入探讨了script部分的处理。今天是系列的最后一天，我们将重点关注script的生成和转换。

       首先，setup返回语句部分主要判断了使用的是template、inlineTemplate还是11000101的源码render函数。对于常规template，我们进入了第一部分逻辑，返回的`returned`包含了变量、函数、类等，但不包括defineProps、defineEmits和defineExpose这些特殊处理。

       对于inline或render函数的处理，虽然重要，但这里暂且不表，留待后续章节。在`export default`部分，除了boolean类型和带有默认值的函数，其余类型定义会被移除，以符合非setup语法的要求。

       接着，代码将解析后的数据整理成非setup语法糖形式，包括合并非setup块的export和导入。这部分，我们直接展示了最终的script代码，以直观展示转换过程。

       在代码中，有几个关键点值得注意，特别是辅助函数的加入，如mergeDefaults，招标门户 源码用于合并默认值。最后，总结部分重申，今天是script处理的尾声，主要工作是将setup语法糖转化为直观的代码，尤其是处理props部分的复杂性。

vue3源码学习--编译阶段汇总

       从vue-loader开始，我们逐步探索vue/compiler-core包的源码，完成了编译阶段的解析（忽略了compiler-ssr部分）。

       涉及的包包括：

       vue-loader：基于webpack的入口

       vueLoaderPlugin：处理核心操作

       @vue/compiler-sfc：处理script、template和style

       compiler-dom：处理template，与compiler-core协同工作

       compiler-core：处理template的核心部分

       vue-loader首先安装vueLoaderPlugin，主要负责匹配资源并调用相应方法。script部分通过@vue/compiler-sfc的compileScript处理，其他如template和style则根据其类型调用相应处理函数。

       编译流程中，script通过babel将JavaScript转换为AST节点，然后进行处理。template则通过compiler-dom和compiler-core转换为浏览器可识别的JavaScript代码。CSS变量和scopeId也是在这个阶段进行处理的。

       在dev模式下，render function会被分离出来以支持热模块替换（HMR），而prod模式下，这些代码会被整合到setup函数中，以提高代码效率。商城盘源码

       最后，总结整个编译阶段，对Vue源码有了深入理解，不再是神秘的魔法，而是清晰的流程。希望这些内容对您有所帮助，祝大家新春快乐！

Vue3源码系列 (四) ref

       一般而言，reactive用于定义响应式对象，而ref则用于定义响应式原始值。前文已介绍reactive，了解到通过Proxy对目标对象进行代理实现响应式，非对象原始值的响应式问题则由ref解决。

       ref和shallowRef各有三种重载，参数不同，都返回Ref/ShallowRef类型的值。createRef函数用于创建响应式值，类似reactive，createRef也是通过createReactiveObject创建响应式对象。而createRef返回RefImpl实例。

       RefImpl是ref的核心内容，构造函数接收两个参数，value是传入的原始值，__v_isShallow用于区分深层/浅层响应式，isShallow()函数利用这个属性做判断。在Ref中，_value属性存储实际值，dep属性存储依赖，在class的getter中通过trackRefValue(this)收集依赖，在setter中调用triggerRefValue(this, newVal)。

       trackRefValue用于收集Ref依赖，接收RefBase类型值，在ref函数中接收RefImpl实例。shouldTrack用于暂停和恢复捕获依赖的标志，activeEffect标记当前活跃的effect。内部调用trackEffects函数收集依赖，该函数来自effect模块。

       triggerRefValue函数用于触发Ref的响应式更新，triggerEffects函数来自effect模块。

       Vue3还提供了自定义的Ref，可以传入getter和setter，自由选择track和trigger时机。

       在setup函数中返回参数时，使用toRef创建ObjectRefImpl实例对响应式对象的某个属性进行解构。

       ObjectRefImpl通过_object属性引用原始响应式对象，在getter中通过_object访问值，依赖收集由_object完成；在setter中，通过引用_object达到赋值操作，从而在_object中触发更新。toRef判断入参是否是Ref，是则直接返回，否则返回ObjectRefImpl。toRefs对传入的对象/数组进行遍历并执行toRef解构。

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

vue3.2 源码浅析：createApp、mount

       Vue3.2 源码浅析：createApp与mount功能解析

       在构建Vue3应用时，我们通常会用到createApp()和mount()这两个关键函数，它们负责初始化整个应用。这里以vue3.2版本的源码为基础进行分析。

       createApp()的核心代码揭示了其主要职责：首先，它处理初始化流程，包括3个主要步骤。这部分源码的精简版展示其功能核心。

       相比之下，mount()的代码更为繁杂，但总体上负责将应用实例与DOM挂载。以下是关键部分的概览：

app.mount()：它首先通过normalizeContainer()获取挂载点，然后调用自身的mount()。这两个mount()功能有别，但都与组件的挂载过程密切相关。

render()函数：这个函数在mount()中创建了VDOM的根节点，与我们日常使用的Vue.render()不同，它们在初始化时承担着构建视图的任务。

patch()函数：作为diff算法的一部分，它负责在初始化阶段，通过先序遍历创建Vue实例和VNode，并将它们与DOM节点紧密关联。

mountComponent()：这部分主要关注实例的创建、初始化以及数据和VNode的双向绑定。初始化流程涉及vue实例的构建，以及setupRenderEffect()的执行路径。

       通过以上分析，createApp()与mount()共同构建并挂载了Vue应用，确保了组件的正确渲染和交互。深入了解这两个函数有助于我们更好地掌握Vue3.2的内部运作机制。