Vue虚拟DOM详细介绍
更新时间：2022年08月04日 15:30:16 作者：饭啊饭°
虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分
一、什么是虚拟DOM
- 虚拟DOM是对真是DOM的抽象，以JavaScript对象（VNode节点）作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上。
- Javascript对象中，虚拟DOM表现为一个Object对象，并且最少包含标签名（tag）、属性（attrs）和子元素对象（children）三个属性。
- 创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应。
- 真实DOM
<div id="app">
<p class="p">节点内容</p>
<h3>{{ foo }}</h3>
</div>
- 实例化vue
const app = new Vue({
el:"#app",
data:{
foo:"foo"
}
})
- 观察render的render，我们能得到虚拟DOM
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
[_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})
- 通过VNode，vue可以对这棵抽象树进行创建节点、删除节点以及修改节点的操作，经过diff算法得出一些需要修改的最小单位，再更新视图，减少了dom操作，提高了性能。
二、为什么需要虚拟DOM
- DOM其实是很慢的，哪怕一个最简单的div也包含着很多的属性。
- 因此操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验。
- 用传统的原生api或jQuery操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。
- 如：当要更新10个DOM节点时，浏览器收到第一个更新DOM请求后，并不知道后续还有9次更新操作，会马上执行流程，最终执行10次流程。通过VNode，同样更新10个DOM节点，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，避免大量的无谓计算。
- 虚拟DOM最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，不仅仅局限于浏览器的DOM，还可以是其他组件。
三、虚拟DOM介绍
回答：虚拟DOM是对真实DOM的一种抽象，会根据DOM标签的名字、属性、孩子对真实DOM进行映射。使用虚拟DOM的原因是，真实DOM其实是很慢的，一个简单的标签也包含了许多属性。同时真实DOM进行更新时的过程很笨拙，虚拟DOM使用diff算法，可以很轻便的进行DOM的操作。
到此这篇关于Vue虚拟DOM详细介绍的文章就介绍到这了,更多相关Vue虚拟DOM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-cli脚手架build目录下utils.js工具配置文件详解
这篇文章主要介绍了vue-cli脚手架build目录下utils.js工具配置文件详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue使用vue-json-viewer展示JSON数据的详细步骤
最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,下面这篇文章主要给大家介绍了vue使用vue-json-viewer展示JSON数据的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了vue实现鼠标悬浮框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家介绍了Vue 3.0的attribute强制行为理解学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在 Vue 应用中,组件间通信是构建复杂应用时的一个常见需求,Vue3.x 提供了provide和inject API,让跨组件通信变得更加简洁和高效,本文将深入探讨如何使用provide和inject在Vue3.x中实现跨组件通信,并通过示例代码一步步进行说明,需要的朋友可以参考下2024-03-03
在 Vue.js 中，父子组件通信是非常重要的，在本文中，我们讨论了 Vue.js 中父子组件通信的几种方式，包括使用 props 传递数据、使用 Sync 修饰符实现双向绑定、使用自定义事件传递数据、使用 $refs 访问子组件实例以及使用 $children 和 $parent 访问父子组件实例2023-09-09
这篇文章主要介绍了Vue的mixin策略的相关资料，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了Vue中如何实现在线预览word文件、excel文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue入门之数量加减运算操作,结合实例形式分析了vue.js基本数值运算相关操作技巧,需要的朋友可以参考下2018-12-12
vue提供了mixin、extends配置项,最近使用中发现很好用,下面这篇文章主要给大家介绍了关于Vue中Mixin&extends的详细使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
最新评论