加餐-Vue3的渲染系统流程解说【手摸手带你实现一个vue3】

大家好,我是作曲家种太阳,Vue3 的渲染系统(runtime)是整个框架的核心,它负责将虚拟 DOM转换为真实 DOM,并在数据变化时高效地更新视图。

让你真正搞清楚:Vue3 渲染系统不仅是什么,更是为什么!

渲染系统整体流程 可以简单理解为:

rust 复制代码
模板/JSX -> 虚拟节点VNode -> 渲染器Renderer -> 真正的DOM

主要经历了两个阶段:

  1. VNode阶段(构建虚拟DOM)
  2. Render阶段(挂载和更新真实DOM)

详细来说,流程如下:

  1. 编写模板 / JSX / 手写 VNode(h函数)
  2. 创建 VNode 树(虚拟 DOM 树)
  3. 调用 render 渲染器,把 VNode 树渲染成真实 DOM
  4. 后续数据变化 -> 生成新的 VNode 树
  5. 新旧 VNode 树进行 Diff 算法比较
  6. 最小化 DOM 更新(patch 更新)

每个阶段详细拆解

1. h 函数 ------ 创建虚拟节点(VNode)

做什么? 把开发者描述的 DOM 节点信息,用 JavaScript 对象(VNode)来表达。

为什么? 直接操作 DOM 很慢,内存中用 JS 对象来描述可以快速计算、比对,提升性能。

解决了什么问题?

将结构数据化,便于管理、比对

为后续 diff 提供基础

支持灵活组合(嵌套组件、slot等)

ts 复制代码
const vnode = h('div', { class: 'hello' }, 'Hello Vue3')
:

最终会生成

js 复制代码
{
  type: 'div',
  props: { class: 'hello' },
  children: 'Hello Vue3'
}

2. render 函数 ------ 挂载或更新 VNode 到真实 DOM

做什么? 把 VNode 转换成浏览器真实的 DOM 元素,并插入到页面中。

为什么?

浏览器只能认识 DOM,VNode只是JS对象,必须转成真实 DOM。

解决了什么问题?

把虚拟世界的描述映射到真实世界

提供更新入口(后续diff)

两种情况:

初次挂载(没有 oldVNode) => 直接创建真实 DOM

更新(有 oldVNode) => 调用 patch 比对后最小化更新

3. patch 函数 ------ 更新虚拟节点并高效更新真实 DOM

做什么? 新旧 VNode 树进行对比,只更新真正变化的部分。

为什么? 直接销毁旧节点、重新创建新节点,开销太大,性能差。

解决了什么问题?

极大减少 DOM 操作次数

提升更新性能

核心是 Diff 算法:

类型不同 => 替换

属性变化 => 更新属性

子节点变化 => 递归比对

4. 渲染器 Renderer ------ 统一封装挂载和更新逻辑

做什么? 把所有"挂载"、"更新"细节封装成一套可复用的渲染逻辑。

为什么?

支持不同平台(浏览器 DOM、Canvas、Weex等)

让核心渲染逻辑平台无关(抽象成 runtime-core)

解决了什么问题?

可插拔的平台适配

一套逻辑,多平台复用

整体串联理解

阶段 解决的问题
h 函数 把开发者描述 => 虚拟DOM 把结构数据化,方便计算和 diff
render 函数 虚拟DOM => 真实DOM 将数据真实映射到浏览器
patch 函数 更新虚拟DOM差异 最小化DOM操作,提升性能
渲染器 Renderer 封装挂载和更新流程 多平台适配,平台无关核心逻辑

总结

Vue3 的渲染系统采用了经典的"虚拟DOM + diff 更新"模式,但又在设计上做了非常多的工程优化和性能提升。

核心思路可以总结为:

把真实DOM抽象成VNode对象,统一管理

通过diff算法,做到只更新变化的部分

通过渲染器抽象,支持多平台扩展

通过批处理异步更新,提高性能(如 nextTick)

Vue3 的渲染系统,就是一套极致优化过的"创建、更新、挂载"流程。

相关推荐
涔溪1 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾1 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的1 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句1 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6661 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞1 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀1 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko1 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端
程序视点2 小时前
望言OCR 2025终极评测:免费版VS专业版全方位对比(含免费下载)
前端·后端·github