1.【Vue原理】VNode - 源码版
2.vue3-computed源码解析
3.Vue2源码细读-new Vue()初始化
4.petite-vue源码剖析-优化手段template详解
5.学习vue源码（18）三探生命周期之初始化provide与inject
6.Vue源码（一）—— new vue()

【Vue原理】VNode - 源码版

       深入理解 Vue 源码，码探VNode 是码探关键组件。它在 Vue2 的码探渲染机制中扮演着核心角色，本文将带你探索2.5.版本的码探 VNode 实际操作。以下是码探核心内容概要：

       首先，VNode 是码探000.exe源码虚拟DOM，用 JavaScript对象的码探形式描述真实DOM，以便在不同环境（如浏览器、码探Node）下保持兼容性，码探支持服务端渲染等。码探它通过减少对DOM的码探直接操作，提高页面性能。码探

       生成 VNode 的码探过程涉及 Vue 源码的构造函数，看似简单但内容丰富，码探需要逐步理解。码探我们通过实例来构建 VNode，它包含了模板的全部信息，包括节点属性、绑定事件、上下文对象等。

       VNode 内部存储的信息非常详尽，如普通属性（如data、elm、context和isStatic），以及组件相关的parent、componentInstance和componentOptions。parent用于保存父子组件间的交互数据，componentOptions记录组件选项，如props、事件和slot。

       在组件实例中，VNode 存储在_vnode和_$vnode属性中。_vnode用于实时比对更新，而_$vnode则专属于组件实例，存储外壳节点信息。bert谷歌源码

       理解 VNode 的工作原理对于深入学习 Vue 不可或缺，尽管本文可能未能覆盖所有细节，但希望对你理解 Vue 源码有所帮助。如有遗漏或疑问，欢迎交流指正。

vue3-computed源码解析

       在 Vue 3 中，理解 computed 源码有助于深入掌握其工作原理。版本为 3.2.，通过单例测试和官网文档，我们了解到 computed 的主要特性是基于 getter 函数创建，类似于一个只读的响应式值，其更新依赖于传入的 getter 函数，而非直接修改.value属性。其核心逻辑与 ref 类似，利用 dep 和 trackRefValue/triggerRefValue 函数实现响应式。

       计算属性的实现分为两种：通过 computed 函数或 deferredComputed。两者都是 ref 类型，但 deferredComputed 在 effect 中具有异步特性，只有在下一次微任务中才会更新。在 Vue 中，通过ComputedRefImpl 对象管理计算属性，它使用 _value 和 _dirty 机制实现懒加载，当数据改变时，会触发收集函数并更新缓存值。

       在源码中，可以看到计算属性的 getter 被包装在 effect 中，依赖数据变化时会通过调度器来触发收集。但需要注意的是，当在 effect 内先改变依赖，再改变外部的计算属性，可能会导致异常。对于 deferredComputed，其调度器更为复杂，会在下一次微任务执行时处理异步更新。媒介交易源码

       虽然 deferredComputed 的处理存在一些特殊情况，如在微任务期间的值比较问题，但 Vue 通过缓存相关 effect 的值，以及 hasCompareTarget 变量，确保了异步更新的正确性。至此，我们已经详细了解了 Vue3 computed 的源码实现，接下来可以继续探索 effectScope 的源码。

       上一章：vue3-ref源码解析

       下一章：vue3-effectScope源码解析

Vue2源码细读-new Vue()初始化

       Vue.js 是一个数据驱动的前端框架，其核心是通过数据生成视图，开发者更关注数据模型与流转而非视图生成。

       从 new Vue() 开始，我们将探索 Vue 实例的创建过程。新创建的 Vue 实例本质上是一个 Vue 的实例对象。Vue 作为构造函数，只能通过 new 操作符创建实例，核心功能是调用初始化方法 _init，并传入参数。

       Vue 的实现中，构造函数定义了多个 mixin，这些 mixin 被挂载到 Vue.prototype，以降低耦合度，便于维护。初始化流程包括多个模块的挂载，如初始化、数据状态、事件发布订阅、生命周期与渲染。

       初始化过程主要分为三个阶段：手动调用场景和组件场景。手动调用场景指直接创建的 Vue 实例，优先级高于组件场景。组件场景涉及全局或局部注册的组件，组件创建和继承通过 Vue.extend 实现。

       组件创建过程中，大厂面试源码Vue.extend 用于获取组件构造函数，createComponent 则生成初始的 VNode。组件实例的创建发生在 patch 过程中，此时调用 init 钩子，真正创建组件实例。

       组件实例的 options 包含组件配置，通过对象赋值保存到实例中。在组件场景中，initInternalComponent 函数处理组件实例的初始化，包括设置组件选项和相关属性。

       综上所述，new Vue() 过程涉及构造函数的初始化、混合功能的挂载、配置的合并与组件的创建。这一过程在后续篇章中将详细分析。

       

参考资料：

[Vue.js 技术揭秘]( 合并配置 | Vue.js 技术揭秘)

petite-vue源码剖析-优化手段template详解

       深入剖析Petite-Vue源码，本文将带你探索其在线渲染、响应式系统和沙箱模型。首先，我们从模板的引入讲起，template在年的设计旨在提供统一且功能强大的模板存储方式，可以参考相关文章：HTML语义化：HTML5新标签——template。

       当我们谈论元素时，template在Vue3的渲染机制中扮演重要角色。在首次渲染过程中，v-if的使用影响着元素的生成。不正确的使用可能导致性能问题，比如，当未配合v-if或v-for时，即使数据改变，元素也不会动态更新，如示例所示，文本"Hello"将无法显示。

       尽管这些优化手段能提升用户体验，信融源码但过度或不当使用可能导致问题。理解其工作原理后，我们学会了如何巧妙地避免这些陷阱。在Petite-Vue中，根块对象的处理方式是关键，特别是当v-if或v-for缺失时，它影响着UI的构建和更新。

       总结来说，模板的使用必须与v-if或v-for紧密结合，以确保组件的响应性和性能。下一章节，我们将深入探讨@vue/reactivity在Petite-Vue中的应用，敬请关注后续内容。这是一份理解Vue3源码的宝贵指南，不容错过。

学习vue源码（）三探生命周期之初始化provide与inject

       在深入研究Vue源码（）的学习中，我们重点关注了初始化阶段的生命周期钩子——initInjections和initProvide。这两个概念在created钩子函数触发前，beforeCreate钩子之后，为组件间的通信提供了重要手段。

       provide和inject是一对核心概念，它们的作用在于跨层级组件间的数据传递。父组件通过provide方法提供数据，而子组件则通过inject方法注入这些数据。它们解决了多级组件间数据共享的问题，避免了过多的$parent属性调用和代码结构的混乱。

       provide是一个对象或返回对象的函数，通常包含子孙组件可注入的属性，可以使用ES6的Symbols作为键。而inject则接受字符串数组或对象，用于在本地绑定中查找并设置数据。通过实例，我们看到它们的工作原理：提供者通过vm._provided传递数据，消费者通过resolveInject方法查找并设置接收的数据。

       源码分析显示，provide将提供数据存储在Vue实例的全局数据中，而inject则在搜索到提供者的数据后，为这些数据设置getter和setter。在写inject时，通常需要为from属性指定的键或默认值，或者提供一个默认工厂方法。

       总的来说，理解并熟练运用provide和inject，是构建高效、可维护的Vue组件架构的关键。接下来，我们会详细研究initState，以全面探索Vue的初始化过程。

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的使用与优化。

vue router 4 源码篇：路由matcher的前世今生

       欢迎大家阅读《Vue Router 4 源码探索系列》专栏，以下是部分内容链接：[1] [2] [3] [4]

       本文将深入讲解vue-router@4.x中matcher的创建过程。createRouterMatcher执行后，返回的五个函数：addRoute, resolve, removeRoute, getRoutes, getRecordMatcher，分别负责matcher的增删改查操作，如getRoutes用于获取所有matcher，removeRoute则是删除指定的matcher。

       通过getRoutes方法，我们可以看到matcher的结构，每个matcher包含了路由对象和相关配置信息。接下来，我们将逐一解析addRoute、resolve、removeRoute等方法的执行流程。

       addRoute函数在createRouterMatcher的初始化中扮演关键角色，它会标准化处理record，合并options，然后存储在normalizedRecords数组中。同时，别名路由的处理也是在此阶段完成的。

       createRouteRecordMatcher负责生成具体的路由匹配器，通过编码和解码处理路由路径，以支持子路由、动态路由等。matcher的生成和originalRecord的处理将决定路由的匹配逻辑。

       matcher的insertMatcher方法确保了matcher的有效组织，避免重复插入，并在matcherMap中存储以支持快速检索。resolve方法内部逻辑有所不同，它根据特定规则返回匹配信息。

       removeRoute负责删除路由及其子路由和别名，getRoutes和getRecordMatcher则提供了获取matcher的便捷方式。matcherMap在整个过程中发挥重要作用。

       至此，我们对matcher有了深入理解。在下一部分，我们会探讨Vue Router 4如何结合Web History API，实现原生功能的无缝集成。感谢阅读，如需更多内容，欢迎关注我的公众号「似马非马」。

Vue2源码解析?2?初始化

       活着，最有意义的事情，就是不遗余力地提升自己的认知，拓展自己的认知边界。

       在搭建源码调试环境一节中，我们已经找到了Vue的构造函数，接下来开始探索Vue初始化的流程。

一个小测试

       在精读源码之前，我们可以在一些重要的方法内打印一下日志，熟悉一下这些关键节点的执行顺序。（执行npmrundev后，源码变更后会自动生成新的Vue.js，我们的测试html只需要刷新即可）

在初始化之前，Vue类的构建过程？

       在此过程中，大部分都是原型方法和属性，意味着实例vm可以直接调用

       注意事项：

       1、以$为前缀的属性和方法，在调用_init原型方法的那一刻即可使用

       2、以_为前缀的原型方法和属性，谨慎使用

       3、本章旨在了解Vue为我们提供了哪些工具（用到时，深入研究，不必要在开始时花过多精力，后边遇到时会详细说明）

       4、类方法和属性在newVue()前后都可以使用，原型方法和属性只能在newVue()后使用

定义构造函数//src/core/instance/index.jsfunctionVue(options){ //形式上很简单，就是一个_init方法this._init(options)}挂载原型方法：_init//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }挂载与state相关的原型属性和原型方法//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}挂载与事件相关的原型方法//src/core/instance/events.jsconsthookRE=/^hook:/Vue.prototype.$on=function(event:string|Array<string>,fn:Function):Component{ }Vue.prototype.$once=function(event:string,fn:Function):Component{ }Vue.prototype.$off=function(event?:string|Array<string>,fn?:Function):Component{ }Vue.prototype.$emit=function(event:string):Component{ }挂载与生命周期相关的原型方法//src/core/instance/lifecycle.jsVue.prototype._update=function(vnode:VNode,hydrating?:boolean){ }Vue.prototype.$forceUpdate=function(){ }Vue.prototype.$destroy=function(){ }挂载与渲染相关的原型方法//installruntimeconveniencehelpersinstallRenderHelpers(Vue.prototype)Vue.prototype.$nextTick=function(fn:Function){ }Vue.prototype._render=function():VNode{ }挂载Vue类方法和类属性//src/core/global-api/index.js//configconstconfigDef={ }configDef.get=()=>configObject.defineProperty(Vue,'config',configDef)Vue.util={ warn,extend,mergeOptions,defineReactive}Vue.set=setVue.delete=delVue.nextTick=nextTick//2.6explicitobservableAPIVue.observable=<T>(obj:T):T=>{ observe(obj)returnobj}Vue.options=Object.create(null)ASSET_TYPES.forEach(type=>{ Vue.options[type+'s']=Object.create(null)})Vue.options._base=Vueextend(Vue.options.components,builtInComponents)initUse(Vue)//挂载类方法use，用于安装插件（特别特别重要）initMixin(Vue)//挂载类方法mixin，用于全局混入（在Vue3中被新特性取代）initExtend(Vue)//实现Vue.extend函数initAssetRegisters(Vue)//实现Vue.component,Vue.directive,Vue.filter函数挂载平台相关的属性，挂载原型方法$mount//src/platforms/web/runtime/index.js//installplatformspecificutilsVue.config.mustUseProp=mustUsePropVue.config.isReservedTag=isReservedTagVue.config.isReservedAttr=isReservedAttrVue.config.getTagNamespace=getTagNamespaceVue.config.isUnknownElement=isUnknownElement//installplatformruntimedirectives&componentsextend(Vue.options.directives,platformDirectives)extend(Vue.options.components,platformComponents)//installplatformpatchfunctionVue.prototype.__patch__=inBrowser?patch:noopconsole.log('挂载$mount方法')//publicmountmethodVue.prototype.$mount=function(el?:string|Element,hydrating?:boolean):Component{ }拓展$mount方法//src/platforms/web/entry-runtime-with-compiler.jsconstmount=Vue.prototype.$mount//保存之前定义的$mount方法Vue.prototype.$mount=function(el?:string|Element,hydrating?:boolean):Component{ //执行拓展内容returnmount.call(this,el,hydrating)//执行最初定义的$mount方法}Vue的初始化过程（很重要哦！！！）

       熟悉了初始化过程，就会对不同阶段挂载的实例属性了然于胸，了解Vue是如何处理options中的数据，将初始化流程抽象成一个模型，从此，当你看到用户编写的options选项，都可以在这个模型中演练。

       前边我们提到过，Vue的构造函数中只调用了一个_init方法

执行_init方法//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ constvm:Component=this//此刻，Vue的实例已经创建，只是雏形，但Vue的所有原型方法可以调用//aflagtoavoidthisbeingobserved//（observe会在后面的响应式章节详细说明）vm._isVue=true//mergeoptionsif(options&&options._isComponent){ //在后面的Vue组件章节会详细说明//optimizeinternalcomponentinstantiation//sincedynamicoptionsmergingisprettyslow,andnoneofthe//internalcomponentoptionsneedsspecialtreatment.initInternalComponent(vm,options)}else{ vm.$options=mergeOptions(//合并optionsresolveConstructorOptions(vm.constructor),//主要处理包含继承关系的实例（）options||{ },vm)}//exposerealselfvm._self=vminitLifecycle(vm)//初始化实例中与生命周期相关的属性initEvents(vm)//处理父组件传递的事件和回调initRender(vm)//初始化与渲染相关的实例属性callHook(vm,'beforeCreate')//调用beforeCreate钩子，即执行beforeCreate中的代码（用户编写）initInjections(vm)//resolveinjectionsbeforedata/props获取注入数据initState(vm)//初始化props、methods、data、computed、watchinitProvide(vm)//resolveprovideafterdata/props提供数据注入callHook(vm,'created')//执行钩子created中的代码（用户编写）if(vm.$options.el){ //DOM容器（通常是指定id的div）vm.$mount(vm.$options.el)//将虚拟DOM转换成真实DOM，然后插入到DOM容器内}}initLifecycle：初始化与生命周期相关的实例属性//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }0initEvents(vm)：处理父组件传递的事件和回调//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }1initRender(vm)：初始化与渲染相关的实例属性//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }2CallHook(vm,'beforeCreate')：执行beforeCreate钩子

       执行options中，用户编写在beforeCreate中的代码

//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }3initInjections(vm)：resolveinjectionsbeforedata/props获取注入数据//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }4initState(vm)：初始化props、methods、data、computed、watch（划重点啦！！！）//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }5initProps:初始化props

       此处概念比较多，propsData、props、vm._props、propsOptions，后续会结合实例来分析其区别，此处只做大概了解。

//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }6initMethods：初始化methods//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }7initData：初始化data//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }8initComputed：初始化computed选项//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }9initWatch：初始化watch

       createWatcher：本质上执行了vm.$watch(expOrFn,handler,options)

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}0initProvide(vm)：提供数据注入

       为什么provide初始化滞后与inject，后续补充

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}1CallHook(vm,'created')：执行created钩子中的代码

       callHook的相关逻辑，参考上面的callHook(vm,'beforeCreate')

执行挂载执行$mount扩展

       通过下面的代码可知：当用户代码中同时包含render，template，el时，它们的优先级依次为：render、template、el

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}2

       $mount方法中，首先获取挂载容器，然后执行mountComponent方法

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}3//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}4

       在_update方法中，通过_vnode属性判断是否初次渲染，patch其实就是patch方法，关于patch的详细逻辑，将在diff算法章节详细说明。

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}5原文：/post/