Vue 虚拟 DOM

虚拟 DOM 作为 Vue 响应式渲染体系的核心抽象层,其设计决策直接影响运行时性能与可维护性。本文将剖析虚拟 DOM 的结构化表达、差异化算法、编译时转换路径及工程化落地要点,为深入理解 Vue 渲染机制与性能调优提供系统性指引。

一、什么是虚拟 DOM

一句话:虚拟 DOM 就是描述视图结构的普通 JavaScript 对象。

js 复制代码
// 一段虚拟 DOM
{
  tag: 'div',
  data: { class: 'list' },
  children: [
    { tag: 'span', text: 'Hello' }
  ]
}

每个组件都有 render 函数,返回的就是一棵虚拟 DOM 树。视图第一次渲染和后续数据更新,都是对这棵树做增删改,而非直接操作真实 DOM。

二、为什么需要虚拟 DOM

真实 DOM 的操作成本极高:创建、插入、删除、重排、重绘都要走浏览器内核。

Vue 的做法是:

  1. 用 JS 计算代替 DOM 计算

    先在内存里对比两棵虚拟 DOM 树,找出最小差异。

  2. 批量 DOM 操作

    把差异一次性 patch 到真实 DOM,减少重排重绘。

结果就是:渲染效率提升,交互响应更快。

三、虚拟 DOM → 真实 DOM 的完整流水线

  1. 首次挂载
    render() ➜ 生成虚拟 DOM ➜ createElm() ➜ 真实 DOM ➜ 插入页面。

  2. 数据更新
    render() 再次执行 ➜ 新的虚拟 DOM ➜ patch(oldVNode, newVNode) ➜ 计算 diff ➜ 最小化更新真实 DOM。

核心算法:同层比较 + 双端 diff,时间复杂度 O(n)。

四、模板与虚拟 DOM 的隐秘关系

模板不是最终产物,而是写给人类的高级语法糖。

vue 复制代码
<template>
  <div class="list">
    <span>{{ msg }}</span>
  </div>
</template>

在 Vue CLI 的默认配置下:

模板字符串 → AST → render 函数 → 虚拟 DOM → 真实 DOM。

  • 预编译阶段:打包时完成模板 → render 的转换,减少运行时开销。
  • 运行时阶段:浏览器里只有 render 函数,没有模板解析器,因此体积更小、速度更快。

总结

  1. 虚拟 DOM 是描述视图的 JS 对象。
  2. 用它代替真实 DOM 计算,降低性能损耗。
  3. 首次渲染生成真实 DOM,数据更新时 diff + patch 只做最小改动。
  4. 模板最终会被预编译成 render 函数,虚拟 DOM 才是运行时真相。

一句话总结:模板写给开发者,虚拟 DOM 写给浏览器,真实 DOM 只负责最终呈现。

相关推荐
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf3 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊3 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel3 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260853 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室4 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart4 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级4 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang5 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang5 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构