码迷,mamicode.com
首页 > 其他好文 > 详细

Vue虚拟DOM

时间:2020-07-08 23:27:21      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:log   应用   贵的   编辑   loading   list   alt   tool   font   

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM,会产生一定的性能问题。这就是虚拟Dom的产生原因。

  • Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(也就是源码中的VNode类,它定义在src/core/vdom/vnode.js中。)

  • 虚拟 DOM 的实现原理主要包括以下 3 部分:

    • 用 JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象;
    • diff 算法 — 比较两棵虚拟 DOM 树的差异;
    • pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
  • key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速

  • 其实虚拟DOM在Vue.js主要做了两件事:

    • 提供与真实DOM节点所对应的虚拟节点vnode
    • 将虚拟节点vnode和旧虚拟节点oldVnode进行对比,然后更新视图

 

技术图片

参考链接:https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html 

其实虚拟DOM在Vue.js主要做了两件事:

  • 提供与真实DOM节点所对应的虚拟节点vnode
  • 将虚拟节点vnode和旧虚拟节点oldVnode进行对比,然后更新视图

Vue虚拟DOM

标签:log   应用   贵的   编辑   loading   list   alt   tool   font   

原文地址:https://www.cnblogs.com/qinglaoshi/p/13269608.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!