vue流程图组件 vuex流程图中文解析

vue进度条插件有哪些？

这里的 vm.$el 是之前在 mountComponent 方法内就挂载的，一个真实 Dom 元素。首次渲染会传入 vm.$el 以及得到的 VNode ，所以看下 vm.__patch__ 定义：

vue-radial-progress - Vue.js放射性进度条组件再组件的 init 方法内首先执行 createComponentInstanceForVnode 方法，这个方法的内部就会将子组件的构造函数实例化，因为子组件的构造函数继承了基类 Vue 的所有能力，这个时候相当于执行 new Vue({...}) ，接下来又会执行 _init 方法进行一系列的子组件的初始化逻辑，我们回到 _init 方法内，因为它们之间还是有些不同的地方：

vue流程图组件 vuex流程图中文解析

vue流程图组件 vuex流程图中文解析

vue-progresar - vue轻量级进度条

vue2-loading-bar - 最简单的仿Youtube加载条视图

请采纳

Vue3_15（全局组件，局部组件，递归组件）

执行 createComponent 方法，如果是元素不会返回任何东西，所以是 undefined ，会继续走接下来的创建元素的逻辑。现在是组件，我们看下 createComponent 的实现：

例如组件使用频率非常高（table，Input，button，等）这些组件 几乎每个页面都在使用便可以封装成全局组件

案例------我这儿封装一个Card组件想在任何地方去使用

使用方法

在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用

其次调用 component 个参数组件名称 第二个参数组件实例

使用方法

直接在其他vue页面 立即使用即可 无需引入

就是在一个组件内（A） 通过import 去引入别的组件(B) 称之为局部组件

应为B组件只能在A组原理跟我们写js递归是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏件内使用 所以是局部组件

如果C组件想用B组件 就需要C组件也手动import 引入 B 组件

案例递归树

在父组件配置数据结构 数组对象格式 传给子组件

子组件接收值

template

TreeItem 其实就是当前组件 通过import 把自身又引入了一遍 如果他没有children 了就结束

Vue原理解析（五）：搞懂虚拟Dom到真实Dom的生成过程

再有一棵树形结构的 JaScript 对象后，我们现在需要做的就是将这棵树跟真实的 Dom 树形成映射关系，首先简单回顾之前遇到的 mountComponent 方法：

我们已经执行完了 vm._render 方法拿到了 VNode ，现在将它作为参数传给 vm._update 方法并执行。 vm._update 这个方法的作用就是就是将 VNode 转为真实的 Dom ，不过它有两个执行的时机：

我们现在先来看下 vm._update 方法的定义：

__patch__ 是 createPatchFunction 方法内部返回的一个方法，它接受一个对象：

nodeOps 属性：封装了作原生 Dom 的一些方法的，如创建、插入、移除这些，再使用到的地方再详解。

modules 属性：创建真实 Dom 也需要生成它的如 class / attrs / style 等属性。 modules 是一个数组，数组的每一项都是这些属性对应的钩子方法，这些属性的创建、更新、销毁等都有对应钩子方法，当某一时刻需要做某件事，执行对应的钩子即可。比如它们都有 create 这个钩子方法，如将这些 create 钩子收集到一个数组内，需要在真实 Dom 上创建这些属性时，依次执行数组的每一项，也就是依次创建了它们。

这里大家记住一句话即可，无论 VNode 是什么类型的，只有三种类型的会被创建并插入到的 Dom 中：元素、注释、和文本。

我们接着来看下 createPatchFunction 它究竟返回一个什么样的方法：

首次渲染时没有 oldVnode ， oldVnode 就是 $el ，一个真实的 dom ，经过 emptyNodeAt(oldVnode) 方法包装：

再将传入的 $el 属性转为了 VNode 格式之后，我们继接下来会将 updateComponent 传入到一个 Watcher 的类中，这个类是干嘛的，我们下一章再说明，接下来执行 mounted 钩子方法。至此 new Vue 的整个流程就全部走完了。我们回顾下从 new Vue 开始它的执行顺序：续：

createElm 方法开始生成真实的 Dom ， VNode 生成真实的 Dom 的方式还是分为元素和组件两种方式，所以我们使用上一章生成的 VNode 分别说明。

大家可以先看下这个流程图有一个印象即可，接下来再看具体实现时相信思路会清晰很多：

开始创建 Dom ，我们来看下它的定义：

依次判断是否是元素、注释、文本，分别创建它们然后插入到父里面，这里主要介绍创建元素，另外两个并没有复杂的逻辑。我们来看下 createChild 方法定义：

开始创建子，遍历 VNode 的每一项，每一项还是使用之前的 createElm 方法创建 Dom 。如果某一项又是数组，继续调用 createChild 创建某一项的子；如果某一项不是数组，创建文本并将它添加到父内。像这样使用递归的形式将嵌套的 VNode 全部创建为真实的 Dom 。

再看一遍流程图，相信大家疑惑已经减少很多：

首先还是看张简易流程图，留个印象即可，方便理清之后的逻辑顺序：

首先会将组件的 vnode.data 赋值给 i ，是否有这个属性就能判断是否是组件 vnode 。之后的 if(isDef(i = i.hook) && isDef(i = i.init)) 集判断和赋值为一体， if 内的 i(vnode) 就是执行的组件 init(vnode) 方法。这个时候我们来看下组件的 init 钩子方法做了什么：

activeInstance 是一个全局的变量，再 update 方法内赋值为当前实例，再当前实例做 __patch__ 的过程中作为子组件的父实例传入，我们在 init 方法内手动挂载这个组件，接着又会执行组件的 _render() 方法得到组件内元素 VNode ，然后执行 vm._update() ，执行组件的 __patch__ 方法，因为 $mount 方法传入的是 undefined ， oldVnode 也是 undefined ，会执行 __patch__ 内的这段逻辑：在子组件的 initLifecycle 时构建组件关系。将 createComponentInstanceForVnode 执行的结果赋值给了 vnodeponentInstance ，所以看下它的返回的结果是什么：

前面都还执行的好好的，却因为没有 el 属性，所以没有挂载， createComponentInstanceForVnode 方法执行完毕。这个时候我们回到组件的 init 方法，补全剩下的逻辑：

这次执行 createElm 时没有传入第三个参数父的，那组件创建好的 Dom 放哪生效了？没有父也要生成 Dom 不是，这个时候执行的是组件的 __patch__ ，所以参数 vnode 就是组件内元素的 vnode 了：

很明显这个时候不是组件了，即使是组件也没关系，大不了还是执行一遍 createComponent 创建组件的逻辑，因为总会有组件是由元素组成的。这个时候我们执行一遍创建元素的逻辑，因为没有第三个参数父，所以组件的 Dom 虽然创建好了，并不会在这里插入。请注意这个时候组件的 init 已经完成，但是组件的 createComponent 方法并没有完成，我们补全它的逻辑：

无论是嵌套多么深的组件，遇到组件的后就执行 init ，在 init 的 __patch__ 过程中又遇到嵌套组件，那就再执行嵌套组件的 init ，嵌套组件完成 __patch__ 后将真实的 Dom 插入到它的父内，接着执行完外层组件的 __patch__ 又插入到它的父内，插入到 body 内，完成嵌套组件的创建过程，总之还是一个由里及外的过程。

再回过头来看这张图，相信会好理解很多~

我们还是以一道 vue 可能会被问到的面试题作为本章的结束吧~

顺手点个赞或关注呗，找起来也方便~

你可能会用的上的一个vue功能组件库，持续完善中...