vue 中为什么需要虚拟DOM、VDOM 是如何生成的、VDOM 如何做 diff 的?

一、vue 中为什么需要虚拟DOM

1.1本概念

基本上所有框架都引入了虚拟 DOM 来对真实 DOM 进行抽象,也就是现在大家所熟知的VNode 和VDOM

·Virtual DOM 就是用js 对象来描述真实 DOM,是对真实 DOM 的抽象,由于直接操作 DOM 性能低但是is 层的操作效率高,可以将 DOM 操作转化成对象操作,最终通过 diff 算法比对差异进行更新 DOM(减少了对真实DOM的操作)。

。虚拟DOM 不依赖真实平台环境从而也可以实现跨平台

二、VDOM 是如何生成的?

。在vue中我们常常会为组件编写模板-template

。这个模板会被编译器编译为渲染函数-render

。在接下来的挂载过程中会调用 render 函数,返回的对象就是虚拟 dom

。会在后续的 patch 过程中进一步转化为 真实dom。

三、VDOM 如何做 diff 的?

。挂载过程结束后,会记录第一次生成的 VDOM -oldVnode

当响应式数据发生变化时,将会引起组件重新 render,此时就会生成新的VDOM-newVnode。使用oldVnode 与newVnode 做 diff 操作,将更改的部分应到真实 DOM 上从而转换为最小量的 dom操作,高效更新视图。

相关推荐
倾颜5 小时前
从 textarea 到 AI 输入框:用 Tiptap 实现 / 命令、@ 引用和结构化请求
前端·langchain·next.js
kyriewen6 小时前
程序员连夜带团队跑路,省了23万:这AI太贵,真的用不起了
前端·javascript·openai
kyriewen7 小时前
你写的代码没有测试,就像出门不锁门——Jest + Testing Library 从入门到不慌
前端·单元测试·jest
yuzhiboyouye8 小时前
web前端英语面试
前端·面试·状态模式
canonical_entropy9 小时前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
前端·低代码·前端框架
东方小月9 小时前
5分钟搞懂Harness Engineering(驾驭工程):从提示词到AI Agent的进化之路
前端·后端·架构
我叫黑大帅9 小时前
为什么需要 @types/react?解决“无法找到模块 react 的声明文件”报错
前端·javascript·面试
之歆9 小时前
DAY_21JavaScript 深度解析:数组(Array)与函数(Function)(一)
前端·javascript
XinZong10 小时前
【AI社交】基于OpenClaw自研轻量化AI社交平台实战
前端
Le_ee10 小时前
ctfweb:php/php短标签/.haccess+图片马/XXE
开发语言·前端·php