Vue虚拟DOM是什么
这篇文章主要讲解了“Vue虚拟DOM是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue虚拟DOM是什么”吧！
一、什么是虚拟DOM
虚拟DOM是对真是DOM的抽象，以JavaScript对象（VNode节点）作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上。
Javascript对象中，虚拟DOM表现为一个Object对象，并且最少包含标签名（tag）、属性（attrs）和子元素对象（children）三个属性。
创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应。
真实DOM
<div id="app">
<p class="p">节点内容</p>
<h4>{{ foo }}</h4>
</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('h4',[_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是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是蜗牛博客，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论