Vue核心之虚拟DOM

一、为什么需要虚拟DOM?

Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发生变化时,其实就是对应某个DOM节点发生了变化。

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。

比如,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量。

所以,用JS对象模拟DOM节点的好处是,页面的更新可以先全部反映在JS对象(虚拟DOM)上,操作内存中的JS对象的速度显然要更快,等更新完成后,再将最终的JS对象映射成真实的DOM,交由浏览器去绘制。

二、虚拟DOM,有什么好处?

DOM操作是制约效率的关键

减少DOM操作,修改内存中的数据(变量)消耗的资源远远小于DOM操作

虚拟DOM就是一个内存中的一个对象,该对象有一个特点和DOM有相同的结构

 <div class=‘test‘ id=‘div1‘>
        <p>100</p>
        <span>呵呵</span>
    </div>

 obj={
    tag:‘div‘,
    className:‘test‘,
    id:“div1”,
    children:[
      {
        tag:‘p‘,
        text:100
      },
      {
        tag:’span‘,
        text:‘呵呵‘
      }
    ]
  }

三、小结

1. Vue运行效率高,采用虚拟DOM,减少真实DOM的操作使项目的运行效率大大提高

2. Vue开发效率高,采用组件化开发

本质上:将开发者的精力从DOM操作解放出来,转移到数据操作上。

原文地址:https://www.cnblogs.com/wpf1913/p/vue-dom.html

时间: 2024-11-06 03:35:21

Vue核心之虚拟DOM的相关文章

深入剖析:Vue核心之虚拟DOM

前言使用 Vue 做项目也有两年时间了,对 Vue 的 api也用的比较得心应手了,虽然对 Vue 的一些实现原理也耳有所闻,例如 虚拟DOM.flow.数据驱动.路由原理等等,但是自己并没有特意去探究这些原理的基础以及 Vue 源码是如何利用这些原理进行框架实现的,所以利用空闲时间,进行 Vue 框架相关技术原理和 Vue 框架的具体实现的整理.如果你对 Vue 的实现原理很感兴趣,那么就可以开始这系列文章的阅读,将会为你打开 Vue 的底层世界大门,对它的实现细节一探究竟. 本文为 Virt

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非

vueOA系统信用盘新增三个极速的虚拟DOM渲染

1.为什么需要虚拟DOM前面我们从OA系统信用盘新增三个极速Q3266397597[dashengba.com]零开始写了一个简单的类Vue框架,其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更改后通过appendChild函数将真实的DOM插入到页面. 虽然采用的是文档碎片,但是操作的还是真实的DOM. 而我们知道操作DOM的代价是昂贵的,所以vue2.0采用了虚拟DOM来代替对真实DOM的操作,最后通过某种机制来完成对真实

虚拟DOM

DOM(Document Object Model)是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需要DOM操作. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差:有了jQuery强大的选择器以及高度封装的API,我们可以更方便的操作DOM,jQuery帮我们处理兼容性问题,同时也使DOM操作变得简单:MVVM使用数据双向绑定,使得我们完全不需要

图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法

其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 1.两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 2.同一层级的一组节点,他们

Vue源码探究-虚拟DOM的渲染

Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue 实例后的一般执行流程,首先来看看实例初始化时对渲染模块的初始处理.这也是开始 mount 路径的前一步.初始包括两部分,一是向 Vue 类原型对象上挂载渲染相关的方法,而是初始化渲染相关的属性. 渲染的初始化 下面代码位于vue/src/core/instance/render.js 相关属性初始

Vue源码学习(六)之虚拟DOM——Vue中的DOM-Diff (上)

1. 前言 在上一篇文章介绍VNode的时候我们说了,VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点,然后就可以对比新旧两份VNode,找出差异所在,然后更新有差异的DOM节点,最终达到以最少操作真实DOM更新视图的目的.而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程.DOM-Diff算法时整个虚拟DOM的核心所在,那么接下来,我们就以源码出发,深入研究一下Vue中的DOM-Diff过程是怎样的. 2. patch 在Vue中,把 DOM-Dif

vue的虚拟dom(Virtual DOM )

模板转换成视图的过程 在底层实现中Vue会将模板编译成渲染函数,当然我们也可以不写模板,直接写渲染函数,以获得更好的控制. 渲染函数:渲染函数是用来生成Virtual DOM的:VNode虚拟节点:vnode可以理解成dom节点的描述对象,它描述了应该怎样去创建真实的DOM节点:patch(patching算法):虚拟DOM最核心的部分,它可以将vnode渲染成真实的DOM.这个过程是对比新旧虚拟节点之间有哪些不同,然后根据对比结果找出需要更新的的节点进行更新.其实际作用是在现有DOM上进行修改

vue虚拟dom原理

Virual DOM是用JS对象记录一个dom节点的副本,当dom发生更改时候,先用虚拟dom进行diff,算出最小差异,然后再修改真实dom. vue的virtual dom的diff算法是基于snabbdom算法改造而来,与react的diff算法一样仅在同级的vnode间做diff,递归的进行同级vnode的diff,最终实现整个DOM树的更新. 虚拟DOM的缺点: 1. 代码更多,体积更大 2. 内存占用增大 3. 小量的单一的dom修改使用虚拟dom成本反而更高,不如直接修改真实dom