1.vue源码分析(1)- new Vue
2.Vue3 源码解读之计算属性computed的源用实现原理
3.Vue—关于插件（源码级别的插件分析+实践）
4.Vue源码（一）—— new vue()
5.Vue3源码系列 (九)：异步组件 defineAsyncComponent 与 Suspense
6.vue 源码详解（三）： 渲染初始化 initRender 、生命周期的码使调用 callHook 、异常处理机制

vue源码分析(1)- new Vue

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

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

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

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

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

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

Vue3 源码解读之计算属性computed的实现原理

       通过在effect函数的options选项中添加lazy属性，可以实现一个懒执行的effect。在effect函数源码中，当options.lazy为true时，则不立即执行副作用函数，并且通过effect函数的返回值拿到对应的副作用函数执行的结果。计算属性实际上就是一个懒执行的副作用函数，通过lazy选项使得副作用函数可以懒执行。

       computed函数的函数签名分为三个重载。第一个重载接受一个getter函数，并返回一个不可变的响应式ref对象。在第二个重载中，computed函数接受一个具有get和set函数的options对象，并返回一个可写的ref对象。第三个重载是前两个重载的结合，函数既可以接受一个getter函数，又可以接受一个具有get和set函数的options对象。

       在computed函数的可爱的网站源码实现中，首先判断传入的getterOrOptions参数是getter函数还是options对象。如果是getter函数，则直接将传入的参数赋值给computed的getter函数。由于在这种情况下计算属性是只读的，因此不允许设置setter函数，并且在DEV环境中设置setter会报出警告。如果getterOrOptions是options对象，则将该对象中的get、set函数分别赋值给computed的getter和setter。处理完computed的getter和setter后，则根据getter和setter创建一个ComputedRefImpl类的实例，该实例是一个ref对象，最后将该ref对象返回。

       为了避免多次访问计算属性导致副作用函数多次执行，在ComputedRefImpl类中定义了一个私有变量_value和一个公共变量_dirty。其中_value用来缓存上一次计算的值，_dirty用来表示是否需要重新计算值，值为true时意味着不纯，则计算属性需要重新计算。在读取计算属性时，会触发getter函数，在getter函数中，判断_dirty的值是否为true，如果是，则重新执行副作用，将执行结果缓存到_value变量中，并返回最新的值。如果_dirty的值为false，说明计算属性不需要重新计算，返回上一次计算的结果即可。

       当计算属性的依赖数据发生变化时，为了使得计算属性是最新的，Vue在ComputedRefImpl类的pageoffice部署项目源码构造函数中为getter创建了一个副作用函数。在该副作用函数中，判断this._dirty标记是否为false，如果是，则将this._dirty置为true，当下一次访问计算属性时，就会重新执行副作用函数计算值。

       在另一个effect中读取计算属性的值时，会触发典型的effect嵌套。一个计算属性内部拥有自己的effect，并且它是懒执行的，只有当真正读取计算属性的值时才会执行。当把计算属性用于另一个effect时，就会发生effect嵌套，外层的effect不会被内层effect中的响应式数据收集。因此，当读取计算属性的值时，需要手动调用trackRefValue函数进行追踪，当计算属性依赖的响应式数据发生变化时，手动调用triggerRefValue函数触发响应。

       总结而言，computed实际上就是一个懒执行的副作用函数，通过_dirty标志使得副作用函数可以懒执行。dirty标志用来表示是否需要重新计算值，当值为true时意味着不纯，则计算属性需要重新计算，即重新执行副作用。通过上述机制，Vue实现了计算属性的高效且响应式的计算和更新。

Vue—关于插件（源码级别的插件分析+实践）

       Vue插件的原理基于Vue的`use`方法，该方法接收一个函数或者提供`install`方法的对象作为参数，如果传入的参数是函数，这个函数会被当作`install`方法。在Vue 2.6.版本中，现金农场源码`use`方法内部使用`initUse`函数给Vue添加了一个静态方法`use`。以vuex为例，它暴露了一个`install`方法，通过`Vue.use(vuex)`来安装插件。vuex的`install`函数会调用`applyMixin`函数，并将Vue传递过去。`applyMixin`函数在Vue 2.x版本中会直接使用`Vue.mixin`来扩展功能，通过在组件的`beforeCreate`钩子中初始化vuex插件。

       在Vue中使用混入（mixin）是一种设计模式，可以轻松地被子类继承功能，目的是实现函数复用。Vue中也应用了这一设计模式，通过`Vue.mixin`可以用来分发可复用逻辑。混入可以分为全局混入和局部混入，全局混入会影响所有的Vue实例，如果组件中与mixin中具有同名的属性，会进行选项合并，除了生命周期外，其它的所有属性都会被组件自身的属性覆盖。使用混入可以节省代码量，类似于类继承。

       要自己实现一个提示框插件，可以通过`this.$notify()`进行调用，并且可以传入自定义模板。创建一个Vue工程，在`src`目录下新建`plugin`目录，然后创建一个`notify`目录，新建`index.js`和`Notify.vue`。在`index.js`中，引入`Notify.vue`组件，并通过`install`方法中注入的Vue来完成功能。实例挂载之后才可以访问`$el`选项，可以通过`Vue.use`来使用插件，然后在App.vue中验证功能是否正常。要实现传入模板并且显示出来，可以通过`$mount` API手动挂载一个实例，并在调用`$notify`方法时将挂载的元素插入到文档中。通过创建Vue组件，将DOM、JS、Style都创建好，最后调用`$notify`方法将组件插入到页面中。要实现传入模板，可以使用`v-html`指令来插入模板，并在Notify.vue中新增接收参数的方法。在App.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的使用与优化。

Vue3源码系列 (九)：异步组件 defineAsyncComponent 与 Suspense

       本文主要探讨Vue3源码中的异步组件API，包括defineAsyncComponent与。

       defineAsyncComponent用于定义异步组件，接受一个异步函数loader或一个包含loader的对象options作为参数。当使用options时，可以自定义更多细节，如加载延迟、异常处理、备选组件和加载中渲染等。通过使用import()动态加载，loader常用来结合它引入单文件组件以构成异步组件。在函数内部，定义了一个load函数，它处理loader的异常，并验证加载成功的结果。返回值为一个经过defineComponent处理过的options对象，其中setup包含异步组件的渲染逻辑。

       在定义异步组件后，createInnerComp在加载成功时根据得到的resolvedComp创建内部组件，实际上通过createVNode来实现渲染，并继承外部组件的ref。

       Suspense在Vue3.2中引入，提供类似组件的API，用于处理异步组件的渲染和错误场景。当组件检测到__isSuspense为真时，调用process方法在渲染器内部渲染组件。根据旧节点状态，process选择挂载或更新节点。

       mountSuspense用于首次加载异步组件的挂载逻辑，而patchSuspense负责新旧节点的对比和更新。Suspense包含多个分支，如活跃、等待、降级等状态，同时考虑异步依赖和降级状态。通过setActiveBranch设置活跃分支。

       SuspenseBoundary生成了一个Suspense实例，具备resolve、fallback、move、next、registerDep、unmount等方法。每个方法分别实现了解决异步结果、挂载降级内容、处理活跃分支和容器、递归取到活跃分支末端、注册依赖以及卸载SUSPENSE等核心功能。

       通过这些API的组合使用，Vue3实现了高效、灵活的异步组件加载机制，确保应用在处理复杂异步数据时依然保持流畅和响应性。

vue 源码详解（三）： 渲染初始化 initRender 、生命周期的调用 callHook 、异常处理机制

       在Vue的源码解析中，本文着重于三个关键点：渲染初始化、生命周期调用及其异常处理机制。这些要素构成了Vue实例构建过程的核心，确保了应用在运行时的流畅性和稳定性。

       渲染初始化

       在Vue实例初始化阶段，一系列关键属性和方法被设置，为后续的渲染工作做好准备。其中，$attrs和$listeners的使用虽然在普通开发场景中可能较少涉及，但在高阶组件中却发挥着重要作用。未来，将专门撰写一篇文章详细阐述其使用方法和场景。

       生命周期调用与callHook

       在完成渲染初始化后，Vue实例开始执行生命周期钩子函数，以执行特定的初始化任务。这些生命周期函数以数组形式存储，形成“任务队列”，确保了函数按照预设顺序执行。调用callHook函数触发beforeCreate生命周期，该函数会遍历队列中的每个任务，并以当前组件实例为上下文执行这些函数。值得一提的是，在调用生命周期钩子时，Vue会暂时禁用依赖收集，以避免不必要的渲染操作。这一机制通过pushTarget和popTarget函数实现，确保在执行钩子函数后，状态能正确恢复。

       异常处理机制

       Vue具有完善的异常处理机制，能够确保在遇到错误时，能够优雅地控制和处理。当组件内出现异常时，异常信息会沿组件链向上层组件传播，直至根组件。这一过程能够确保错误信息被妥善处理，避免了错误对应用整体性能的影响。通过配置组件上的errorCaptured属性，开发者可以选择阻止异常向上层组件传播，从而实现更精细的错误管理。

       在Vue的生命周期管理和异常处理方面，callHook函数作为触发器，通过遍历生命周期队列执行相应任务。而invokeWithErrorHandling函数则负责处理每个任务函数的执行，确保即使在执行过程中出现异常，也能通过适当的错误处理机制进行统一管理和控制。

       综上所述，Vue的渲染初始化、生命周期调用和异常处理机制构成了其高效、灵活且安全的运行基础，为开发者提供了强大的工具集，以构建复杂的应用程序。通过深入理解这些核心部分，开发者能够更有效地利用Vue的特点，实现高效、稳定的应用开发。