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

相关推荐
前端菜鸟日常4 分钟前
vue2和vue3的按需引入的详细对比通俗易懂
javascript·vue.js·ecmascript
AC-PEACE19 分钟前
Vue 中 MVVM、MVC 和 MVP 模式的区别
前端·vue.js·mvc
播播资源22 分钟前
ChatGPT付费创作系统V3.1.3独立版 WEB端+H5端+小程序端 (DeepSeek高级通道+推理输出格式)安装教程
前端·ai·chatgpt·ai作画·小程序·deepseek·deepseek-v3
冷琴199630 分钟前
基于Python+Vue开发的反诈视频宣传管理系统源代码
开发语言·vue.js·python
zhrb1 小时前
打开Firefox自动打开hao360.hjttif.com标签解决方案
前端·firefox
安大桃子1 小时前
Cesium实现深色地图效果
前端·gis·cesium
程楠楠&M1 小时前
uni-app(位置1)
前端·javascript·uni-app·node.js
破z晓1 小时前
uniapp 整合openlayers 编辑图形文件并上传到服务器
前端·javascript·uni-app
码农君莫笑1 小时前
Linux系统上同时打印到物理打印机并生成PDF副本方法研究
linux·前端·chrome·打印·信管通
xlxxy_1 小时前
ABAP数据库表的增改查
开发语言·前端·数据库·sql·oracle·excel