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操作,高效更新视图。

相关推荐
muddjsv1 小时前
前端性能优化实战:从加载到渲染的全面提速指南
前端·性能优化
deli0070072 小时前
JSON 树形查看器:粘贴即解析,折叠展开一目了然
前端·数据库·json·ai编程
guanguan0_02 小时前
PageProxy:页面维度接口地图 + 一键场景切换
前端·ai编程·请求代理·proxy工具
liangshanbo12152 小时前
虚拟列表深度面试题整理
java·开发语言·前端
IT_陈寒3 小时前
Redis内存警告竟是因为这个不起眼的配置项
前端·人工智能·后端
lilian2333 小时前
Harmony os 技术实战|拼豆制图43:压缩字符矩阵上线前如何拦住错位图纸
开发语言·前端·华为·矩阵·harmonyos
kyriewen3 小时前
我踩了3次同一个坑才明白:JavaScript里比0.1+0.2更隐蔽的5个数字陷阱
前端·javascript·面试
徐小夕3 小时前
表格、文档、甘特、大屏、表单一站打通:pxcharts超级表格4.0正式上线!
前端·算法·github
用户594404103564 小时前
Vue3 + TypeScript + Leaflet.js 实战:构建企业级地理信息应用
前端
kyson_4 小时前
一次搭好 ESLint + Prettier + Husky + lint-staged 前端代码工作流
前端