什么是虚拟DOM-【图解】

读书过一遍,看视频过一遍,自己再总结一遍,总归不会那么容易忘记了吧~🤓

What

什么是虚拟DOM

一种对真实DOM的抽象(本质上是JavaScript对象),将DOM的实际变更状态映射为视图的一种解决方案

原理

使用状态生成虚拟节点,然后使用虚拟节点来渲染视图

例如:DOM中字体颜色发生改变时,就会产生一个状态,并生成了对应的虚拟Dom,虚拟DOM再进一步处理,渲染出了变化后的真实DOM

Why

为什么要引入虚拟DOM

框架设计原因-减少对真实DOM的操作

原生JS操作数据更新时,找出对应元素,执行更新操作即可,如下图:

框架更新数据时,需要找出数据变更和页面更新的关系【这点很难做到】。

要么暴力更新,即删除全部原有DOM,生成一份新的DOM【代价太大】。

被迫引入虚拟DOM,每次生成一份新的虚拟DOM,比较新旧虚拟DOM之间的不同来执行更新操作,示意图如下:

跨平台原因-磨平差异化【例如:小程序、移动APP、桌面应用等】

How

Vue.js中的虚拟DOM是怎样运作的?

【前置知识点】vnode是什么?

在Vue.js中存在一个Vnode类,可以利用它来实例化不同类型的vnode类型,不同的实例类型着各自表示着不同类型的DOM元素。

在使用Vue.js的过程中,我们晓得它是通过模板来描述状态与DOM之间的映射关系。并通过编译将模板转换成渲染函数(render),执行渲染函数就可以得到一个虚拟节点树,最终通过它就可以渲染页面。如下图所示:

上图中vnode对应着真实的DOM元素,而patch则是虚拟DOM最核心的部分

  • patch可以将vnode渲染成真实的DOM。
  • 渲染过程中并不是全量覆盖原有的DOM,而是对比新旧两个vnode之间有哪些不同,根据具体需要更新节点。

结合patch,下图是虚拟DOM的整体执行流程:

小结:

虚拟DOM在Vue.js中的所作所为:

  • 提供与真实DOM节点对应的虚拟节点vnode;
  • 将虚拟节点vnode和旧虚拟节点oldVnode进行对比,然后更新视图。
相关推荐
customer0815 分钟前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙2 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds3 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果3 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长3 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
guai_guai_guai4 小时前
uniapp
前端·javascript·vue.js·uni-app