[vue3] vue3初始化渲染流程

组件初次渲染流程

组件是对DOM树的抽象，组件的外观由template定义，模板在编译阶段会被转化为一个渲染函数，用于在运行时生成vnode。即组件在运行时的渲染步骤是：

graph LRA[创建vnode] --> B[渲染vnode] --> C[生成DOM]

vnode是一个用于描述视图的结构和属性的JavaScript对象。vnode是对真实DOM的一层抽象。

使用vnode的优点：

  • 相比于直接操作DOM，在需要频繁更新视图的场景下，可以将多次操作应用在vnode上，再一次性地生成真实DOM，可以避免频繁重排重绘导致的性能问题；
  • vnode是抽象的视图层，具有平台无关性，上层代码可移植性强。

应用程序初始化

对于一个vue-app来说，整个组件树由根组件开始渲染。为了找到根组件的渲染入口，从应用程序的初始化过程开始分析。

在Vue2中，初始化应用的代码：

import Vue from 'vue';
import App from './App';const app = new Vue({render: h=>h(App)
});
app.$mount('#app');

在Vue3中，初始化应用的代码：

import { createApp } from 'vue';
import App from './App';const app = createApp(App);
app.mount('#app');

对比二者的代码可以看出，本质都是把App组件挂载到了#appDOM节点上。

本文主要关注Vue3。

Vue3的createApp的实现大致如下：

首先，createApp函数由createAppAPI根据对应的render对象构建得到。

export function createAppAPI<HostElement>(render: RootRenderFunction<HostElement>,hydrate?: RootHydrateFunction,
): CreateAppFunction<HostElement> {return function createApp(rootComponent, rootProps = null) {//...}
}

源码位置：core/packages/runtime-core/src/apiCreateApp.ts at main · vuejs/core (github.com)

render对象由baseCreateRenderer函数创建，根据不同的环境创建不同的render对象（常见的是浏览器环境下用来渲染DOM）。

并由render对象来决定createApp函数的实现：

// baseCreateRenderer函数的返回值
return {render,hydrate,createApp: createAppAPI(render, hydrate),
}

这种根据不同环境构建不同render对象的操作是为了实现跨平台。

接下来回到createApp内部。

createApp应用工厂模式，在内部创建app对象，实现了mount方法，mount方法就是用来挂载组件的。

function createApp(rootComponent, rootProps = null){// ...const app: App = {// ...mount(rootContainer: HostElement,isHydrate?: boolean,namespace?: boolean | ElementNamespace,): any{// mount的具体实现，这里省略了很多代码...// 1. 创建vnodeconst vnode = createVNode(rootComponent, rootProps)// 2. 渲染vnoderender(vnode, rootContainer, namespace)}// ...}return app;
}

在整个app对象创建过程中，Vue3通过闭包和函数柯里化等技巧实现了参数保留。

例如上面的mount方法内部实际上会使用render函数将vnode挂载到container上。而render由createAppAPI调用时传入。这就是闭包的应用。

graph TBA["baseCreateRenderer"] --> B["craeteAppAPI [render]"]B --> C["createApp"]C --> D["mount"]D --> |"使用render"|B

上面提到的app对象中对mount的实现位于packages/runtime-core，也就是说是与平台无关的，内部都是对抽象的vnode、rootContainer进行操作，不一定是DOM节点。

Vue3将浏览器相关的DOM的实现移到了packages/runtime-dom中，在index.ts中可以看到ensureRenderer函数就调用了runtime-core中上述提到的createRenderer方法，传入了DOM相关的配置，用于获取一个专门用于浏览器环境的renderer。

源码位置：core/packages/runtime-dom/src/index.ts at main · vuejs/core (github.com)

在runtime-dom的index.ts中，我们从createApp函数入手，观察到它调用了ensureRenderer来获取一个适配浏览器环境的renderer，并调用其对应的createApp函数。

export const createApp = ((...args) => {const app = ensureRenderer().createApp(...args)// ......const { mount } = app// 重写mount方法app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {// 标准化容器：将字符串选择器转换为DOM对象const container = normalizeContainer(containerOrSelector)if (!container) returnconst component = app._component// 如果组件对象没有定义render函数和template模板，则取容器的innerHTML作为模板内容if (!isFunction(component) && !component.render && !component.template) {// 使用innerHTML需要注意安全性问题component.template = container.innerHTML// ......}// 挂载前删除容器的内容container.innerHTML = ''// 走runtime-core中实现的标准流程进行挂载const proxy = mount(container, false, resolveRootNamespace(container))// ......return proxy}return app
}) as CreateAppFunction<Element>

阶段性总结：

  • 重写mount的原因：

    • runtime-core中的mount：实现标准化挂载流程；
    • runtime-dom中的mount：实现DOM节点相关的预处理，然后调用runtime-core中的mount进行挂载；

  • runtime-dom中mount的流程：

    1. 标准化容器：如果传入字符串选择器，那么调用document.querySelector将其转换为DOM对象；

    2. 检查组件是否存在render函数和template对象，如果没有则使用容器的innerHTML作为模板；

      使用innerHTML需要注意安全性问题。

    3. 删除容器原先的innerHTML内容；

    4. 调用runtime-core中实现的mount方法走标准化流程挂载组件到DOM节点上。

从app.mount方法调用后，才真正开始组件的渲染流程。

接下来，回到runtime-core中关注渲染流程。

核心渲染流程

这一流程中主要做了两件事：创建vnode和渲染vnode。

vnode是用来描述DOM的JavaScript对象，在Vue中既可以描述普通DOM节点，也可以描述组件节点，除此之外还有纯文本vnode和注释vnode。

可以在runtime-core的vnode.ts文件中找到vnode的类型定义：core/packages/runtime-core/src/vnode.ts at main · vuejs/core (github.com)

内容较多，这里不做展示，比较核心的属性有比如：

  • type：组件的标签类型；
  • props：附加信息；
  • children：子节点，vnode数组；

除此之外，Vue3还为vnode打上了各种flag来做标记，在patch阶段根据不同的类型执行相应的处理逻辑。

创建vnode

在mount方法的实现中，通过调用createVNode函数创建根组件的vnode：

const vnode = createVNode(rootComponent, rootProps);

在vnode.ts中可以找到createVNode函数的实现：core/packages/runtime-core/src/vnode.ts at main · vuejs/core (github.com)

大致思路如下：

function _createVNode(type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,props: (Data & VNodeProps) | null = null,children: unknown = null,patchFlag: number = 0,dynamicProps: string[] | null = null,isBlockNode = false,
): VNode{// ...// 标准化class和style这些样式属性if(props){// ...}// 对vnode类型信息编码(二进制)const shapeFlag = isString(type)? ShapeFlags.ELEMENT: __FEATURE_SUSPENSE__ && isSuspense(type)? ShapeFlags.SUSPENSE: isTeleport(type)? ShapeFlags.TELEPORT: isObject(type)? ShapeFlags.STATEFUL_COMPONENT: isFunction(type)? ShapeFlags.FUNCTIONAL_COMPONENT: 0// 调用工厂函数构建vnode对象return createBaseVNode(type,props,children,patchFlag,dynamicProps,shapeFlag,isBlockNode,true,)
}

接下来看一下createBaseVNode的大致实现（这个函数也位于vnode.ts文件内）：

function createBaseVNode(// vnode部分属性的值
){const vnode = {type,props,// ...很多属性} as VNode// 标准化children：讨论数组或者文本类型if (needFullChildrenNormalization) {normalizeChildren(vnode, children)}return vnode
}

渲染vnode

创建好vnode之后就是渲染的过程，在mount中使用render函数渲染创建好的vnode。

render的标准化流程的实现位于runtime-core的renderer.ts中：

源码位置：core/packages/runtime-core/src/renderer.ts at main · vuejs/core (github.com)

const render: RootRenderFunction = (vnode, container, namespace) => {if (vnode == null) {// 销毁组件if (container._vnode) {unmount(container._vnode, null, null, true)}} else {// 创建或者更新组件patch(container._vnode || null,vnode,container,null,null,null,namespace,)}if (!isFlushing) {isFlushing = trueflushPreFlushCbs()flushPostFlushCbs()isFlushing = false}// 缓存vnode节点，表示已经渲染container._vnode = vnode
}
  • 如果vnode不存在，则调用unmount销毁组件；
  • 如果vnode存在，那么调用patch创建或者更新组件；
  • 将vnode缓存到容器对象上，表示已渲染。

patch函数的前两个参数分别是旧vnode和新vnode。

  • 初次调用，则container._vnode属性返回undefined，短路运算符传入null，则patch内部走创建逻辑；调用过后会将创建的vnode缓存到container._vnode；
  • 后续调用的container._vnode表示上一次创建的vnode，不为null，传入patch后走更新逻辑。
patch的实现

patch本意是打补丁，这个函数有两个功能：

  1. 根据vnode挂载DOM；
  2. 比较新旧vnode更新DOM。

这里只讨论初始化流程，故只记录如何挂载DOM，更新流程这里不做介绍。

源码位置：core/packages/runtime-core/src/renderer.ts at main · vuejs/core (github.com)

const patch: PatchFn = (n1,n2,container,anchor = null,parentComponent = null,parentSuspense = null,namespace = undefined,slotScopeIds = null,optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren,
) => {// 二者相同，不需要更新if (n1 === n2) {return}// vnode类型不同，直接卸载旧节点if (n1 && !isSameVNodeType(n1, n2)) {anchor = getNextHostNode(n1)unmount(n1, parentComponent, parentSuspense, true)n1 = null}// ......const { type, ref, shapeFlag } = n2switch (type) {case Text:// 处理文字节点breakcase Comment:// 处理注释节点breakcase Static:// 静态节点breakcase Fragment:// Fragment节点breakdefault:if (shapeFlag & ShapeFlags.ELEMENT) {// 处理普通DOM元素} else if (shapeFlag & ShapeFlags.COMPONENT) {// 处理组件} else if (shapeFlag & ShapeFlags.TELEPORT) {// 处理teleport} else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {// 处理suspense} else if (__DEV__) {// 报错：vnode类型不在可识别范围内warn('Invalid VNode type:', type, `(${typeof type})`)}}
}

这里只关注前三个函数参数：

  • n1：旧vnode，为null则表示初次挂载；
  • n2：新vnode；
  • container：挂载的目标容器。

patch在其内部调用了processXXX处理不同类型的vnode，这里只关注组件类型和普通DOM节点类型。

对组件的处理

处理组件调用的是processComponent函数：

processComponent
const processComponent = (n1: VNode | null,n2: VNode,container: RendererElement,// ... 其它参数
) => {if (n1 == null) {// 挂载组件mountComponent(n2, container, /*...other args*/)} else {// 更新组件updateComponent(n1, n2, optimized)}
}
// 这里还有很多其它参数省略了，函数体内还处理了`keep-alive`的情况，具体可以自己看源码。
  • 挂载组件使用mountComponent函数；
  • 更新组件使用updateComponent函数。
mountComponent

源码位置：core/packages/runtime-core/src/renderer.ts at main · vuejs/core (github.com)

这个函数处理了较多边界情况，这里只展示主要的步骤：

 const mountComponent: MountComponentFn = (initialVNode,container,anchor,parentComponent,parentSuspense,namespace: ElementNamespace,optimized,) => {// 创建组件实例const instance: ComponentInternalInstance =(initialVNode.component = createComponentInstance(initialVNode,parentComponent,parentSuspense,))// 设置组件实例setupComponent(instance, false, optimized)// 设置并运行带副作用的渲染函数setupRenderEffect(instance,initialVNode,container,anchor,parentSuspense,namespace,optimized,)}
  • 创建组件实例：工厂模式创建组件实例对象；
  • 设置组件实例：instance记录了许多组件相关的数据，setupComponent这一步主要是对props、slots等属性进行初始化。

接下来重点看一下setupRenderEffect函数的实现。

setupRenderEffect

setupRenderEffect 函数的主要工作是设置一个响应式效果 (ReactiveEffect)，并创建一个调度任务 (SchedulerJob) 来管理组件的渲染和更新。首次渲染和后续更新的逻辑都封装在 componentUpdateFn 中。

简化后的代码：

const setupRenderEffect: SetupRenderEffectFn = (instance,initialVNode,container,anchor,parentSuspense,namespace: ElementNamespace,optimized,
) => {// 组件更新函数const componentUpdateFn = () => {if (!instance.isMounted) {// 首次挂载逻辑instance.subTree = renderComponentRoot(instance)patch(null, instance.subTree, container, anchor, instance, parentSuspense, namespace)instance.isMounted = true} else {// 后续更新逻辑const nextTree = renderComponentRoot(instance)patch(instance.subTree, nextTree, container, anchor, instance, parentSuspense, namespace)instance.subTree = nextTree}}// 创建响应式效果const effect = (instance.effect = new ReactiveEffect(componentUpdateFn, NOOP))// 创建调度任务const update: SchedulerJob = (instance.update = () => {if (effect.dirty) {effect.run()}})// 立即执行更新函数update()
}

setupRenderEffect内部主要包含了3个函数：

  • componentUpdateFn 的主要作用是在组件首次挂载和后续更新时执行相应的渲染逻辑，确保组件的虚拟 DOM 树与实际的 DOM 树保持同步，并执行相关的生命周期钩子函数。
  • effect 封装了组件的渲染逻辑，负责在响应式依赖变化时触发重新渲染。
  • update 是调度任务，负责在适当的时机检查和触发 effect，确保组件的渲染逻辑能够正确执行。

也就是说它们依次为前者的进一步封装。

componentUpdateFn中的初始挂载逻辑：

  • 渲染组件生成subTree；（递归调用patch）
  • 将subTree通过patch挂载到container上。

这里的patch就是一个递归过程。事实上patch对于组件只有渲染过程，没有挂载的操作，因为组件是抽象的，并不能通过DOM API插入到页面上。

也就是说patch只对DOM类型元素进行mount挂载，对于组件类型元素的处理只做递归操作。换个角度描述就是：组件树的叶子节点一定都是DOM类型元素，只有这样才能渲染并挂载到页面上。

接下来开始研究patch对DOM类型元素的处理过程。（可以返回上文看一下patch的实现）。

对DOM的处理
processElement

patch函数使用processElement 函数处理新旧DOM元素，当n1为null时，走挂载流程；否则走更新流程。

源码地址：core/packages/runtime-core/src/renderer.ts at main · vuejs/core (github.com)

const processElement = (n1: VNode | null,n2: VNode,container: RendererElement,// ...other args...) => {if (n1 == null) {// 挂载mountElement(n2, container, /* ...other args... */)} else {// 更新patchElement(n1, n2, parentComponent, /* ...other args... */)}}
mountElement

源码位置：core/packages/runtime-core/src/renderer.ts at main · vuejs/core (github.com)

这里省略了很多代码，只保留大致流程：

  1. 创建DOM元素；

  2. 挂载子节点；

    • 如果子节点只是文字，则设置DOM节点的textContent；

    • 如果子节点是数组，则使用for循环 + 递归调用patch函数渲染子元素；

      这里递归使用的是patch而不是mountElement是因为子元素可能不是DOM元素，而是其它类型的元素。因此还是要用到patch中的switch - case走类型判断的逻辑。

  3. 设置DOM元素的属性；

  4. 插入DOM元素。

const mountElement = (vnode: VNode,container: RendererElement,/* ...other args... */
) => {const { props, shapeFlag, transition, dirs } = vnode// 创建DOM元素const el = vnode.el = hostCreateElement(vnode.type as string, namespace, props && props.is, props)// 挂载子节点if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {hostSetElementText(el, vnode.children as string)} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {mountChildren(vnode.children as VNodeArrayChildren, el, null, parentComponent, parentSuspense, resolveChildrenNamespace(vnode, namespace), slotScopeIds, optimized)}// 设置属性if (props) {for (const key in props) {if (key !== 'value' && !isReservedProp(key)) {hostPatchProp(el, key, null, props[key], namespace, parentComponent)}}// 特殊处理 value 属性if ('value' in props) {hostPatchProp(el, 'value', null, props.value, namespace)}}// 插入元素hostInsert(el, container, anchor)
}

其中的hostCreateElement、hostSetElementText、hostPatchProp、hostInsert函数都由runtime-dom中在创建renderer的时候传入对应的实现。

在runtime-dom模块的nodeOps.ts和patchProp.ts文件可以找到这些DOM相关操作的具体实现。

nodeOps.ts源码位置：core/packages/runtime-dom/src/nodeOps.ts at e26fd7b1d15cb3335a4c2230cc49b1008daddca1 · vuejs/core (github.com)

patchProp.ts源码位置：core/packages/runtime-dom/src/patchProp.ts at e26fd7b1d15cb3335a4c2230cc49b1008daddca1 · vuejs/core (github.com)

上述hostXXX对应的DOM方法分别是：

  • hostCreateElement：document.createElement；
  • hostSetElementText：el.textContent = ...；
  • hostPatchProp：直接修改DOM对象上的键值，会对特殊的key做处理；
  • hostInsert：[Node.insertBefore](Node.insertBefore() - Web API | MDN (mozilla.org))

初次渲染流程总结

mount

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/778285.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[米联客-安路飞龙DR1-FPSOC] SDK入门篇连载-03 GPIO PS/PL实验

[米联客-安路飞龙DR1-FPSOC] SDK入门篇连载-03 GPIO PS/PL实验

软件版本：Anlogic -TD5.9.1-DR1_ES1.1 操作系统：WIN10 64bit 硬件平台：适用安路(Anlogic)FPGA 实验平台：米联客-MLK-L1-CZ06-DR1M90G开发板 板卡获取平台：https://milianke.tmall.com/ 登录"米联客"FPGA社区 http://www.uisrc.com 视频课程、答疑解惑！ 1 概述本…
阅读更多...
2024/8/5笔记

2024/8/5笔记

字符串专题 1 暑假二南集训 day1 A - GT考试 洛谷 - P3193 [HNOI2008] GT考试 题目描述 阿申准备报名参加 GT 考试，准考证号为 \(N\) 位数\(X_1,X_2…X_n\ (0\le X_i\le 9)\)，他不希望准考证号上出现不吉利的数字。 他的不吉利数字\(A_1,A_2,\cdots, A_m\ (0\le A_i\le 9)\) …
阅读更多...
[米联客-安路飞龙DR1-FPSOC] SDK入门篇连载-02 FPSoc程序固化入门

[米联客-安路飞龙DR1-FPSOC] SDK入门篇连载-02 FPSoc程序固化入门

软件版本：Anlogic -TD5.9.1-DR1_ES1.1 操作系统：WIN10 64bit 硬件平台：适用安路(Anlogic)FPGA 实验平台：米联客-MLK-L1-CZ06-DR1M90G开发板 板卡获取平台：https://milianke.tmall.com/ 登录"米联客"FPGA社区 http://www.uisrc.com 视频课程、答疑解惑！ 1概述在…
阅读更多...
[米联客-安路飞龙DR1-FPSOC] SDK入门篇连载-01 FPSoc开发入门

[米联客-安路飞龙DR1-FPSOC] SDK入门篇连载-01 FPSoc开发入门

软件版本：Anlogic -TD5.9.1-DR1_ES1.1 操作系统：WIN10 64bit 硬件平台：适用安路(Anlogic)FPGA 实验平台：米联客-MLK-L1-CZ06-DR1M90G开发板 板卡获取平台：https://milianke.tmall.com/ 登录"米联客"FPGA社区 http://www.uisrc.com 视频课程、答疑解惑！ 1概述1.…
阅读更多...
maven 中 scope标签的作用以及引入本地jar包打包方法

maven 中 scope标签的作用以及引入本地jar包打包方法

1. scope标签的作用2、使用system标签 项目三方jar存放位置结构：pom.xml中引入三方jar： <dependency><groupId>test</groupId><artifactId>testa</artifactId><version>0.0.1</version><scope>system</scope><syst…
阅读更多...
强大的USB协议分析工具

强大的USB协议分析工具

2020年最后一天了，感谢大家一年来对我文章的支持，有你们的支持就是我强大的动力。 今天来给大家介绍一个USB 协议分析软件LeCroy USB Advisor，软件安装包下载连接如下： 链接：https://pan.baidu.com/s/12qBCOjuy4i8kr1MHjBrfYQ 提取码：2rpx 这个软件对于USB协议学习有很大…
阅读更多...
python用弹窗选文件

python用弹窗选文件

from tkinter.filedialog import askopenfilename file_path = askopenfilename() 这是我能找到的最简洁版本来源：https://blog.csdn.net/u014769180/article/details/84639775 from tkinter.filedialog import askopenfilenamefile_path = askopenfilename()这是我能找到的最…
阅读更多...
D38 2-SAT CF27D Ring Road 2

D38 2-SAT CF27D Ring Road 2

视频链接：D38 2-SAT CF27D Ring Road 2_哔哩哔哩_bilibili CF27D Ring Road 2 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)#include <iostream> #include <cstring> #include <algorithm> using namespace std;const int N=205; int n,m,x[N],y[N]; i…
阅读更多...
Linux的特殊权限

Linux的特殊权限

特殊权限是什么 在Linux中，特殊权限是指针对文件或目录的特殊权限设置，包括SetUID、SetGID和Sticky Bit。特殊权限说明SetUID Set User ID 当一个可执行文件被设置了SetUID权限后，当任何用户执行该文件时，文件的所有者权限会被赋予执行者，而不是执行者的权限。这使得用户可…
阅读更多...
性能测试之内存瓶颈问题分析与调优

性能测试之内存瓶颈问题分析与调优

注意：内存问题是性能分析与调优非常常见的一类问题（内存不足/内存泄露/内存溢出等） 一、内存概念： 计算机的存储系统分为主存储系统（内存） 辅助存储系统（外存） 外存 ：计算机的辅助存储器,包括硬盘、软盘、光盘、网络云盘等 【输入-键盘，鼠标，输出- 屏幕，音频 视频】…
阅读更多...
【待做】【域渗透】获取域控方法总结

【待做】【域渗透】获取域控方法总结

搭建虚拟环境 【域控】，192.168.10.3 【域成员】，192.168.10.4工具 mimikatz procdump64在域渗透中、作为渗透测试人员，获取域控的权限基本上可以获取整个内网的权限。在大多数情况下，攻击者可以通过定位域管理员所登录的服务器，利用漏洞获取服务器system权限，找到域管理…
阅读更多...
南京大学计算机基础（四）踩坑笔记

南京大学计算机基础（四）踩坑笔记

第六周 缓冲区溢出章节 bang问题：每次输入的id将影响getbuf中的堆栈位置，用-u 12的ebp和-u 123的ebp位置就不一样。 注意汇编代码中不能出现a0(代表换行符），如果地址有a0就将它随便改改就行了(a0改为a8-0x8)。注意gdb如果不能重定向，可能是因为你修改了gdbinit：https://s…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023