1.vue早期源码学习系列之四：如何实现动态数据绑定
2.Vue3源码系列（七）：createApp— 一切的码案起源
3.Vue原理Slot - 源码版之普通插槽
4.Vue3实践附带源码：基于Vue3、Javascript、码案Node.js、码案MongoDB、码案UniApp的码案个人博客全栈全端系统实现
5.Vue源码（一）—— new vue()

vue早期源码学习系列之四：如何实现动态数据绑定

       本系列更多文章，请查阅我的码案斩妖诀h5源码博客：GitHub - youngwind/blog: 梁少峰的个人博客。或扫描下方二维码关注公众号“前端控”，码案欢迎交流讨论！码案

       在前一篇中，码案我们学习了如何监听数据变化以及使用观察者模式和事件传递响应变化事件。码案今天，码案我们将探讨如何基于watch库实现动态数据绑定。码案

       我们可以将问题具体化为一个例子：如何实现当user.name或user.age发生变化时，码案HTML上的码案DOM元素也能相应地改变？

       最初，我采取了以下方法：在数据顶层注册一个事件，码案当任意属性改变时，重新遍历DOM模板，将{ { user.name}}等转换为实际值，在内存中拼接成fragment，最后将新fragment替换掉原有的DOM结构。这种方法虽然简单，但存在不少问题。

       基于上述问题，我们需要改进这种做法。为此，我们引入了Directive（指令）的概念，其构造函数和原型方法如下所示。实体识别 源码关键实现思路是：在遍历DOM模板的过程中，当遍历到文本节点："{ { name}}"时，先将其中的表达式"name"匹配出来，然后新建一个空的textNode，插入到这个文本节点的前面，最后移除这个文本节点。这样，就实现了用一个程序生成的textNode代替原来的textNode，从而实现每个textNode都跟它的表达式一一对应起来。

       然而，这种方法仍然存在问题。为了解决这些问题，我们引入了Binding和Watcher这两个“类”。Binding用于解决键值索引，Watcher用于解决$watch。Binding、Watcher和Directive三者之间的关系如下：（此处插入）

       从图中可以看出，有一个_rootBind对象，其属性是按照DOM模板中用到的数据层层深入排列下去的。在每个属性上都有一个_subs数组，这个数组表示订阅的意思，里面存放的是一系列Watcher。Watcher既可以装载Directive，也可以装载$watch。这就是vue实现动态数据绑定的三大核心概念。

       学习Vue.js，辅助源码网址我checkout的是vue的这个版本。相比于之前的学习，代码量大幅增加，从七八百行增加到差不多五千行。特别是Binding、Watcher和Directive这几个核心概念，一开始让人难以理解。经过多日的思考和不断调试，我才逐渐明白。

       此外，通过Binding、Watcher、Directive构建的动态数据绑定体系还存在一个重大缺陷，我们将在下一篇文章中专门阐述。

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

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

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

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

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的执行机制。

Vue原理Slot - 源码版之普通插槽

       Vue源码中的Slot机制有助于理解组件间的内容传递，今天我们将深入剖析普通插槽的原理。首先，普通插槽包括默认Slot和具名Slot，它们的主要区别在于是否具有自定义名称，但处理方式相似。

       以一个简单示例开始，我们创建一个父组件，其中包含名为'test'的子组件，它有一个slot区域。插槽内容解析的关键在于，其作用域在父实例上，这意味着slot内的变量会直接引用父实例的属性，如上面例子中的name。

       当父组件渲染时，会绑定父实例为执行上下文，test组件内的slot内容会根据with语句访问父实例的变量。解析插槽内容的过程与普通模板节点的解析流程相同，只是访问的是父实例的属性。

       接下来，父组件生成的VNode会包含子组件test及其slot。尽管HTML中不会直接出现'test'标签，但Vue会将其视为一个组件。在patch阶段，Vue会根据VNode创建DOM并插入页面。当遇到test组件时，会解析其组件模板，将slot内容存储在组件实例的$slot属性中。

       最后，test组件的渲染函数中会调用_renderChildren中的slot信息，替换slot占位符，形成最终的渲染逻辑。整个过程可以总结为：插槽内容解析、父组件VNode处理、slot转存至子组件实例以及渲染函数的替换。

       以上就是普通插槽在Vue源码中的工作流程，接下来的文章会继续深入讲解其他类型的slot和相关原理。如果你对Vue源码感兴趣，可以查看我们的系列分享：Vue原理Vue源码阅读总结大会 - 序，以及之前关于响应式原理、Props等的文章。

Vue3实践附带源码：基于Vue3、Javascript、Node.js、MongoDB、UniApp的个人博客全栈全端系统实现

       站在年3月日的傍晚，细雨轻洒，街灯微光，思绪在雨中飘荡。疲倦的身体漫步于街头，雨水触感清冷，唤醒内心的冥想。回望过往，展望未来，这一刻属于自我，是生活的点滴记忆。这不仅是对过去的总结，对未来的一次期许，更激发了追求独特有意义项目的决心。带着这份自我探索和创造的冲动，决定基于Vue3、JavaScript、Node.js、MongoDB以及UniApp，构建一个个人博客全栈全端系统。

       项目架构分为前端、后端与数据库三大部分。前端采用Vue3和UniApp，后端则使用Express处理HTTP请求，MongoDB负责数据存储。通过此架构，旨在创造一个功能完备、操作流畅的个人博客平台。

       前端开发中，Vue3与UniApp的协同作用，将为用户提供无缝、高效的体验。UniApp的跨平台特性，确保了应用在不同设备上的一致性，而Vue3的更新特性，如性能优化和组件化，将助力构建出更高效、更灵活的界面。

       后端部分则聚焦于Express框架，其简洁高效的API处理能力，将确保服务器响应快速，满足高并发访问需求。模型层、控制器、路由层的划分，让代码结构清晰，易于维护与扩展。例如，创建博文的接口路径为`POST /v1/blog/blog_articles/create`，直观地展示了数据交互的流程。

       全栈开发过程中，不仅对技术有了更深层次的掌握，也体验到从底层到上层的连贯性，更全面地理解问题与解决方案。全栈开发提供了一种对应用全方位控制的能力，从数据处理到用户体验，每一个环节都能细致入微地进行优化与调整。

       总结而言，这个个人博客全栈系统不仅是一个技术实践的成果，更是个人成长的见证。在这个过程中，不仅积累了丰富的经验，更深刻理解了技术与设计的融合之道。全栈开发的魅力在于其能从全局视角审视项目，快速定位并解决问题。对于未来，这份经验和技能将成为宝贵的财富，持续推动个人与技术的共同成长。

Vue源码（一）—— new vue()

       探究Vue源码的奥秘，始于Vue实例化过程。在src/core目录下的index.js文件，承载了Vue实例化的核心逻辑。初探此源码，面对未知，不妨大胆猜想，随后一一验证。

       深入分析，我们发现一个简单粗暴的Vue Class定义，随后一系列init、mixin方法用于初始化关键功能。通过代码，确认此入口确实导出一个Vue功能类。进一步探索，核心在于initGlobalAPI，它揭示Vue全局属性，包括官方说明的全局属性。详细代码部分因篇幅限制，仅展示关键代码段。

       关注全局变量，如$isServer、$ssrContext，它们在ssr文档中有详细说明。这些变量与Head管理紧密相关，用于SSR环境下的特殊操作。至此，入口文件解析完成。

       深入Vue class实现，我们揭示其内核，包括Vue的生命周期管理。此部分解析将揭示Vue实例如何运作，以及其生命周期各阶段的重要性。了解这些，有助于我们更深入地掌握Vue的使用与优化。