关于前端:Vue3-渲染器分析

在上一篇中，咱们晓得 render 函数最终是通过 baseCreaterenderer 创立的。

当通过 createApp API 创立的组件实例调用mount 办法挂载组件的时候，其实 mount 办法也是通过调用 render 办法。

实现组件的渲染工作。

这篇文章次要剖析是对 baseCreateRender 函数源码进行剖析。

baseCreateRenderer函数的整体代码大略有一千多行。

蕴含的信息相当丰盛。

纵向扩大，能够学习到 Vnode 的patch过程、虚构 DOM 的diff形式、指令的调用形式。

深度扩大，能够学完 template 的解析、转换与生成，任务调度器的执行过程、甚至响应式零碎。

还有就是写完，能够补上后面好多留的坑😂。

这次咱们先纵向学习，理解该函数在 Vue 中次要做了什么。前面在逐渐深刻。

上篇文章中，咱们晓得 app 实例是通过 createApp API 创立的，createApp 将createRenderer函数返回的对象中的 app 属性做了一些解决之后。再返回给用户。

而 createRenderer 其实调用的是 baseCreateRenderer 函数，并给 baseCreateRenderer 函数传递了一个用于配置渲染器的 options 对象。

这个 options 对象中蕴含了 DOM 的解决办法 & 属性的 patch 办法。

而 baseCreateRenderer 函数返回的对象中，蕴含 render 渲染函数、hydrate用于服务端渲染的注水函数、createApp函数。

Vue3顺带的将 render 办法设定为API，不便高阶玩家自由发挥。

当咱们调用 app 实例上的 mount 办法时。

会依据挂载的组件创立对应的Vnode。

将 Vnode、挂载元素el 传给 render 函数。

最终通过 render 函数实现组件的渲染工作。

为了不便外部 patch 函数的应用，baseCreateRenderer函数首先对 options 进行了解构.

options次要蕴含的办法是对 DOM 的创立、插入、挪动、设置、获取父节点、克隆节点、patch属性等办法。

这里咱们须要先简略相熟下：

  insert: hostInsert,
  remove: hostRemove,
  patchProp: hostPatchProp,
  forcePatchProp: hostForcePatchProp,
  createElement: hostCreateElement,
  createText: hostCreateText,
  createComment: hostCreateComment,
  setText: hostSetText,
  setElementText: hostSetElementText,
  parentNode: hostParentNode,
  nextSibling: hostNextSibling,
  setScopeId: hostSetScopeId = NOOP,
  cloneNode: hostCloneNode,
  insertStaticContent: hostInsertStaticContent

在组件生命周期中，首次挂载会触发 mounted 钩子。

后续如果状态产生变换，会触发 beforeUpdate、updated 钩子。

这其实与渲染函数 render 无关。

render函数首先会判断 Vnode 是否存在。

如果不存在阐明须要执行进行卸载，执行 unmount 操作。

如果存在须要进行 patch 操作。

patch的过程就蕴含了组件了创立到挂载，变动到更新。

 const render = (vnode, container, isSVG) => {if (vnode == null) {
      // 如果没有 Vnode，则卸载原来的 Vnode
      if (container._vnode) {unmount(container._vnode, null, null, true)
      }
    } else {
      // 存在则对新旧 Vnode 进行 patch
      // patch 是一个递归的过程
      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
    }
    // patch 完结后，开始冲刷任务调度器中的工作
    flushPostFlushCbs()
    // 更新 vnode
    container._vnode = vnode
  }

从代码来看，render函数的逻辑并不简单。

render函数的设计思维，根本就代表了 vue 解决各种类型节点的形式；

首先会判断 Vnode 是否存在，如果不存在，则调用 unmount 函数，进行组件的卸载
否则调用 patch 函数，对组件进行patch
patch 完结后，会调用 flushPostFlushCbs 函数冲刷工作池
最初更新容器上的Vnode

Vnode有不同的类型，在这里我将其分为：

简略类型：文本、正文、Static。
简单类型：组件、Fragment、Component、Teleport、Suspense。

patch思路，能够看作一个深度优先遍历。与深度克隆的逻辑十分类似。

简略类型就相当于 JS 中的原始数据类型：字符串、数字、布尔。

简单类型就相当于 JS 中的援用类型：对象、数组、Map、Set。

不同的节点类型，须要采取不同的 patch 形式。

而 patch 函数的主要职责就是去判断 Vnode 的节点类型，而后调用对应类型的 Vnode 解决形式，进行更粗疏的patch。

上面咱们看下 patch 函数是如何解决的。

为了升高 patch 函数的了解难度，上面的流程图体现的是 patch 处理过程中的次要逻辑，并没有将所有细节记录在图中。

匹配到 Text 类型Vnode。
会调用 ProcessText 函数对节点进行解决。
ProcessText函数首先会判断 n1 是否存在。
不存在，阐明是第一次执行，间接进行文本插入。
新旧，新旧文本不同，会设置新的Text。

匹配到 Comment 类型Vnode
调用 processCommentNode 函数
如果 n1 不存在，则执行插入工作
否则间接新的笼罩旧的，因为正文节点并不需要在页面中进行展现，不用做多余的渲染工作

咱们晓得 Vue3 的性能晋升，有局部起因就是得益于对动态节点的解决。
patch过程中，匹配到 Static 类型节点。
如果 n1 不存在，会调用mountStaticNode，对动态节点进行挂载操作。
如果是 dev 环境，会调用 patchStaticNode 函数，patch节点。
为什么仅在 dev 环境中进行 patch 呢，因为 dev 环境下波及到HMR。
另外动态节点不存在对 state 的依赖，不会触发track、trigger。且放弃不变，在生产环境下，不用进行patch。以升高性能开销。

匹配到 Fragment 类型节点。
会调用 processFragment 函数，进行解决。
Fragment节点，Fragment是 Vue3 中新增的 Fragment 组件，能够包裹多个子节点，然而并不会渲染 Fragment 节点。
所以在渲染过程中次要解决的是 Fragmemt 包裹的子节点。
如果 n1 不存在，会执行mountChildren，对子节点进行挂载。
- mountChildren会对子节点进行遍历操作，递归调用 patch 函数。
如果 n1 存在，会对子节点再进行进一步的判断
- 如果 patchFlag 存在 && 存在动静节点
- 则会调用patchBlockChildren，对子节点进行patch，
- patchBlockChildren会遍历子节点，递归调用 patch 函数
- 否则会调用 patchChildren 函数，对子节点进行patch
- patchChildren在执行的过程中波及到了 DOM 的diff过程，这里临时不开展剖析，前面会出独自进行剖析

匹配到 Element 类型
会调用 processElement 函数
n1不存在，会执行 mountElement 函数，对 Vnode 进行挂载
- mountElement在挂载 Vnode 过程中，会通过mountChildren，对子节点进行递归挂载解决。
- 并会对 Vnode 的prop进行patch。
- 并调用 queuePostRenderEffect 函数，向任务调度池中的后置执行阶段 push 生命周期钩子mounted。
否则会执行 patchElement 函数，对 element 进行 patch，patchElement 函数次要会执行以下工作：
- 调用 hostPatchProp 对节点的 class、style 进行patch
- 遍历 props 对节点的新旧 props 进行patch
  - 调用 patchBlockChildren 或者 patchChildren 进行 patch 操作
  - 并调用 queuePostRenderEffect 函数，向任务调度池中的后置执行阶段 push 生命周期钩子updated。
  - 这里须要对子节点解决的起因是因为 Element 的子节点中，也可能还有组件或者其余类型的节点

通常状况下，咱们都会给 createApp 传递一个组件
故当 render 函数执行 patch 时，首先会匹配到组件类型的节点
如果是组件类型，会调用 processComponent 函数进行解决
首先会判断 n1 是否存在
如果存在会进一步判断
- 该组件是否是被 Keep-Alive 包裹的组件
- 如果是，则会执行组件的 activate 钩子
- 否则会调用 mountComponent 函数，对组件进行挂载
- mountComponent函数波及的层级较深，这里先不开展说，然而要晓得以下几点：
  - 会实现组件实例的创立
  - 实现 Props、Slots 的初始化
  - 执行 setup 函数，获取响应式状态
  - 实现组件模板的解析、编译与转换
  - 调用 setupRenderEffect 创立一个 渲染级别的effect
  - 用于负责组件的更新，这里我临时将其称为updateEffect。
否则会执行 updateComponent 函数，判断组件是否须要进行更细
- 次要会对组件的新旧Props、子节点进行判断
- 如果发生变化，会调用 mountComponent 阶段创立的updateEffect，触发响应式零碎
- 否则间接原有的间接进行笼罩

Teleport 与 Suspense是 Vue3 新增的两个内置组件
如果匹配到以上两种，会调用组件实例上的 process 办法
porcess办法的次要逻辑与后面的雷同
首先会判断原有 Vnode 是否存在，不存在则mount，存在则patch
这两种类型的具体解决形式，咱们会在剖析这两个组件的源码的时候会进行剖析

如果调用 render 函数时没有传 Vnode，则会调用unmount 函数对组件进行卸载
卸载过程中，如果存在ref，会首先重置ref
如果组件是通过 Keep-Alive 缓存的组件，会通过 deactivate 对组件进行卸载
如果是组件类型 Vnode，会通过unmountComponent 函数对组件进行卸载
- 在卸载组件过程中会执行 beforeMount 生命周期钩子
- 通过stop API 来卸载组件的所有相干effect
- 如果存在 updateEffect，会卸载updateEffect，并递归调用unmount 函数，对组件进行卸载
- 最初会执行 unmount 生命周期钩子
- 并通过 queuePostRenderEffect 向任务调度器中的后置工作池中，push一个用于标记组件已实现卸载的函数
- 至此，就实现了组件的卸载工作
如果不是组件类型的Vnode，会有以下几种状况：
- 如果是 Suspense 类型，会通过 Suspense 实例上的 unmount 办法实现 Vnode 的卸载工作
- 如果是 Teleport 类型，会通过 Teleport 实例上的 remove 办法实现 Vnode 的卸载工作
- 如果存在子组件，会通过 unmountChildren 实现子组件的卸载工作
- 最初会调用 remove 函数实现 Fragment、Static、Element 类型的卸载工作

从下面整个过程能够看出，卸载组件过程根本与 patch 形似，也是对各种类型的 Vnode 有不同的解决办法，并会通过递归调用 unmount 实现组件的卸载工作，卸载过程中，会卸载组件相干的effect、updateEffect，触发卸载相干的生命周期钩子 & 指令相干的钩子。

通过下面的梳理剖析，能够晓得，对于所有类型的组件，patch过程十分类似。

首先会判断原有的 vnode 是否存在。

如果不存在，则会进行 mount 操作。

如果存在则会对新旧 Vnode 进行 patch 操作。

不同的是对于简单类型的 Vnode，因为其外部可能蕴含有其余类型的Vnode，比方Component 类型。其中会波及到：

组件实例的创立
模板的编译工作
子组件的递归 patch 工作等等

在 unmount 过程中，同样的会对不同的组件类型进行解决，并卸载组件的所有相干effect，递归卸载子组件。

不过没有提及的是下面的两个过程中，都会向任务调度器中 push 工作。

在 render 函数执行的最初阶段，会通过 flushPostFlushCbs 冲刷任务调度器，对于任务调度器是如何运作的，能够移步这里👉任务调度器源码剖析

其实写到这里还有两个问题没有说：

第一个问题：还有哪些没有说？

baseCreateRenderer 蕴含的内容切实是太多了，要想一篇就剖析完并输入，对于读者和我都是一种考验。所以本文只是纵向的对 baseCreateRenderer 进行了剖析，并没有深究细节。

比拟重要的有几点：

子节点的 diff 过程
组件类型编译过程、响应式转换过程
updateEffect 做了什么
如何进行指令的生命周期钩子调用
生命周期的执行过程
往任务调度器中都 push 了哪些工作
如何设计的性能监控零碎

等等细节之处都是咱们还没有说的。不过前面咱们会持续。

第二个问题：baseCreateRenderer 这么简单，我或者你费了这么大劲读了有什么用？

上面我说说我的感触：

在工作中，很大概率下没啥用。因为 Vue 通过 createRenderer 曾经做了很全面的配置，创立的 render 函数，曾经能满足工作需要。
如果是高阶玩家，比如说我想用 createRenderer 做个 Vnode 渲染引擎，可能有帮忙。只须要通过配置 Options。就能够创立一个定制化的渲染器。并且这个渲染器曾经蕴含了 Vnode 的 diff 零碎、编译系统。

最初非常感谢各位的浏览，如果文章有疏漏之处，还望批评指正。

如果有所播种，能够帮我点个关注，我会继续更新 Vue 的相干学习分享😁！

关于前端:Vue3-渲染器分析

前文回顾

解构配置项

渲染逻辑

patch Vnode

Text 类型

Comment 类型

Static 类型

Fragment 类型

Element 类型

Component 类型

Teleport 类型 & Suspense 类型

卸载组件

总结

Just My Socks（注册教程内含优惠码）

关于前端:Vue3-渲染器分析

前文回顾

解构配置项

渲染逻辑

patch Vnode

Text 类型

Comment 类型

Static 类型

Fragment 类型

Element 类型

Component 类型

Teleport 类型 & Suspense 类型

卸载组件

总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）