Vue教程十二——虚拟DOM

最新推荐文章于 2023-06-06 22:25:35 发布

ruby___ruby

最新推荐文章于 2023-06-06 22:25:35 发布

阅读量227

点赞数 1

本文链接：https://blog.csdn.net/ruby___ruby/article/details/114601334

版权

虚拟DOM

在此章节，讲解一下关于Vue虚拟DOM的知识点。
那什么是虚拟DOM呢，这里了解一下页面渲染的过程。

当我们请求页面时，HTTP请求返回就会返回页面HTML数据：

1、首先会将HTML信息构建成DOM节点树
2、之后将CSS样式构建成CSSOM树
3、之后将上面的两棵树结合形成一个render树
4、Layout，根据render树计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置
5、最后根据排版后的结构进行页面的绘制Painting

注意，这是一个极其复杂耗时的过程，假如我们执行操作，一次改一点，一次改一点，那么就需要一遍又一遍的删除原来的DOM，然后执行上面的页面渲染重新构建DOM，页面就会卡死，所以Vue的虚拟DOM就是帮助解决这个问题的。

Vue的虚拟DOM就是解决上面页面反复加载问题的，Vue会构建了和真实DOM结构相似的一个虚拟的DOM，注意：真实DOM是HTML构建的，但是，虚拟DOM只是构建一个对象而已。

当页面发生变化了，虚拟DOM会帮助生成一个新的节点，然后比较一下新旧两个节点（注意，这两个所谓的节点，都只是虚拟DOM弄的对象而已），如果新旧节点不一样，再把新节点构建成真实的DOM节点放到真实DOM上，这一顿操作下来，就相当于打补丁，但是真的缓解了很多，就不需要直接摧毁原来的DOM重建。

关注