精华内容
下载资源
问答
  • vue 虚拟DOM的原理

    2020-10-14 17:29:51
    主要介绍了vue 虚拟DOM的原理,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
  • 对于vue虚拟dom理解

    千次阅读 2020-03-23 21:41:45
    例如,若一次操作有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量。简单来说,...

    为什么需要虚拟dom?

    虚拟DOM就是为了解决浏览器性能问题而被设计出来的。例如,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量。简单来说,可以把Virtual DOM 理解为一个简单的JS对象,并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。

    实现虚拟dom

    1. 在内存中生成一颗虚拟dom树
      在这里插入图片描述
    2. 将内存中的虚拟dom树初始化渲染成真实dom树
    3. 当我们修改data里面的数据时候
      在这里插入图片描述
    4. 将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树
      在这里插入图片描述
    5. 将此次生成好的新的虚拟dom树与上一次虚拟dom树结构进行对比,对比差异(diff算法)
    6. 将对比出来的差异部分进行重新真实dom结构的渲染

    diff算法的实现过程

    初次渲染的时候,将VDOM渲染成真正的DOM然后插入到容器里面。
    再次渲染的时候,将新的vnode和旧的vnode相对比,然后之间差异应用到所构建的真正的DOM树上。

    在实际代码中,会对新旧两棵树进行一个深度的遍历,每个节点都会有一个标记。每遍历到一个节点就把该节点和新的树进行对比,如果有差异就记录到一个对象中。
    渲染的一些不同改变:
    1.如果节点类型改变,直接将旧节点卸载,替换为新节点,旧节点包括下面的子节点都将被卸载,如果新节点和旧节点仅仅是类型不同,但下面的所有子节点都一样时,这样做也是效率不高的一个地方。
    2.节点类型不变,属性或者属性值改变,不会卸载节点,执行节点更新的操作。
    3.文本改变,直接修改文字内容。
    4.移动,增加,删除子节点时。
    如果想在中间插入节点F,简单粗暴的做法是:卸载C,装载F,卸载D,装载C,卸载E,装载D,装载E。如下图:
    在这里插入图片描述
    如果为元素增加key后,Vue就能根据key,直接找到具体的位置进行操作,效率比较高。如下图:
    在这里插入图片描述
    在v-for中提供key,一方面可以提高性能,一方面也会避免出错。

    展开全文
  • vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树 2.为什么需要虚拟dom? 在vue中,渲染视图会调用render函数,这种渲染不仅发生在组件创建...

    1. 什么是虚拟dom?

    • 虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构
    • 在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树

    在这里插入图片描述

    2.为什么需要虚拟dom?

    • 在vue中,渲染视图会调用render函数,这种渲染不仅发生在组件创建时,同时发生在视图依赖的数据更新时。如果在渲染时,直接使用真实DOM,由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗,从而就会极大的降低渲染效率。
    • 因此,vue在渲染时,使用虚拟dom来替代真实dom,主要为解决渲染效率的问题。

    3.虚拟dom是如何转换为真实dom的?

    • 在一个组件实例首次被渲染时,它先生成虚拟dom树,然后根据虚拟dom树创建真实dom,并把真实dom挂载到页面中合适的位置,此时,每个虚拟dom便会对应一个真实的dom。
    • 如果一个组件受响应式数据变化的影响,需要重新渲染时,它仍然会重新调用render函数,创建出一个新的虚拟dom树,用新树和旧树对比,通过对比,vue会找到最小更新量,然后更新必要的虚拟dom节点,最后,这些更新过的虚拟节点,会去修改它们对应的真实dom
    • 这样一来,就保证了对真实dom达到最小的改动。

    在这里插入图片描述

    4.模板和虚拟dom的关系

    • vue框架中有一个compile模块,它主要负责将模板转换为render函数,而render函数调用后将得到虚拟dom。

    编译的过程分两步:

    1. 将模板字符串转换成为AST
      
    2. 将AST转换为render函数
      
    • 如果使用传统的引入方式,则编译时间发生在组件第一次加载时,这称之为运行时编译。
    • 如果是在vue-cli的默认配置下,编译发生在打包时,这称之为模板预编译。
    • 编译是一个极其耗费性能的操作,预编译可以有效的提高运行时的性能,而且,由于运行的时候已不需要编译,vue-cli在打包时会排除掉vue中的compile模块,以减少打包体积
    • 模板的存在,仅仅是为了让开发人员更加方便的书写界面代码
    • vue最终运行的时候,最终需要的是render函数,而不是模板,因此,模板中的各种语法,在虚拟dom中都是不存在的,它们都会变成虚拟dom的配置
    展开全文
  • 虚拟dom这个东东其实我之前也不知道,之前一直以为是因为vue等的这些mvvm框架就是因为数据驱动页面,减少了大量的dom操作,所以才会性能更好。 知道又一次去面试,面试官问到知道为什么vue等的这些mvvm框架比传统的...

    前沿


    • 虚拟dom这个东东其实我之前也不知道,之前一直以为是因为vue等的这些mvvm框架就是因为数据驱动页面,减少了大量的dom操作,所以才会性能更好。
    • 知道又一次去面试,面试官问到知道为什么vue等的这些mvvm框架比传统的操作dom渲染页面要快么?我回答的就是第一条,他说不全是,不过最后还是跟我说了,回去了解一下虚拟dom
    • 所以才回去就赶紧看了看,现在有空,赶紧整理出来
    • 如果后期能理解更深,会持续更新的。

    我也是了解之后才发现vue官网中有提出虚拟dom的概念,只不过是自己没有当回事罢了。

    什么是虚拟dom

    • 文档对象模型或DOM定义了一个接口,该接口允许JavaScript之类的语言访问和操作HTML文档。元素由树中的节点
      表示,并且接口允许我们操纵它们。但是此接口需要付出代价,大量非常频繁的DOM操作会使页面速度变慢

    • 每个元素都是一个节点,每段文字也是一个节点,一个节点就是页面的额一部分,就像家谱一样,每个节点都有孩子节点。

    • 虚拟dom就是为了解决操作真是dom带来的性能问题而出现的,所以说,

    • 虚拟dom就是用js对象模拟真实的dom节点,也就是将所有的更新dom的操作先全部反映在js对象上(虚拟dom上)

    • 操作内存中的js对象显然速度要快很多,等更新完成后,再将最终的js对象映射到真是的dom上,交由浏览器去绘制页面。

    • 上边所说的js对象模拟真实的dom节点也就是官网中所说的(虚拟节点VNode.)
      看看官网怎么说
      vdom.png

    • 也就是这个原理大大提高了渲染速度。

    可能还有理解不到位的地方,后期在慢慢更新。

    展开全文
  • Vue中虚拟DOM理解

    2020-08-02 12:05:36
    Vue中虚拟DOM理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这棵树映射到真实环境上,简单来说...

    Vue中虚拟DOM的理解

    Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这棵树映射到真实环境上,简单来说Virtual DOM就是一个Js对象,用以描述整个文档。

    描述

    在浏览器中构建页面时需要使用DOM节点描述整个文档。

    <div class="root" name="root">
        <p>1</p>
        <div>11</div>
    </div>
    

    如果使用Js对象去描述上述的节点以及文档,那么便类似于下面的样子,当然这不是Vue中用以描述节点的对象,Vue中用以描述一个节点的对象包括大量属性,例如tagdatachildrentextelmnscontextkeycomponentOptionscomponentInstanceparentrawisStaticisRootInsertisCommentisCloned等等,具体的属性可以参阅Vue源码的/dev/src/core/vdom/vnode.js

    {
        type: "tag",
        tagName: "div",
        attr: {
            className: "root"
            name: "root"
        },
        parent: null,
        children: [{
            type: "tag",
            tagName: "p",
            attr: {},
            parent: {} /* 父节点的引用 */, 
            children: [{
                type: "text",
                tagName: "text",
                parent: {} /* 父节点的引用 */, 
                content: "1"
            }]
        },{
            type: "tag",
            tagName: "div",
            attr: {},
            parent: {} /* 父节点的引用 */, 
            children: [{
                type: "text",
                tagName: "text",
                parent: {} /* 父节点的引用 */, 
                content: "11"
            }]
        }]
    }
    

    Vue中首先会解析template中定义的HTML节点以及组件节点,为render作准备,在解析的过程中会生成_c()_v()等函数,其作为renderHelpers用以创建节点,_v()函数就是用以创建文本节点,而_c()函数就是用以创建VNode节点的,这个函数其实就是Vue中定义的_createElement()函数,通过这个函数来确定创建的是普通节点还是组件节点,具体可以在Vue源码中/dev/src/core/vdom/create-element.js以及/dev/src/core/vdom/create-element.js查阅,当解析完成之后,便能够生成render函数,而当render函数执行后便返回了VNode节点组成的虚拟DOM树,树中的每一颗节点都会存储渲染的时候需要的信息,之后便是通过diff算法以及patch过程的createElmpatchVnode渲染到真实DOM

    if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
        warn(
          `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
          context
        )
      }
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
    } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
    }
    

    作用

    渲染真实DOM的过程中开销是很大的,例如当有时候修改了某个数据或者属性,如果直接渲染到真实DOM上可能会引起整个DOM树的重绘与回流,而diff算法能够只更新修改的那部分DOM结构而不更新整个DOM,这里需要说明的是操作DOM结构的速度并不慢,而性能消耗主要是在浏览器重绘与回流的操作上。
    当选用diff算法进行部分更新的时候就需要比较旧DOM结构与新DOM结构的不同,此时就需要VNode来描述整个DOM结构,首先根据真实DOM生成Virtual DOM,当Virtual DOM某个节点的数据改变后会生成一个新的Vnode,然后通过newVNodeoldVNode进行对比,发现有不同之处便进行patch修改于真实DOM,然后使旧的Virtual DOM赋值为新的Virtual DOM
    简单来说建立Virtual DOM的目的是减少对于整个DOM的操作,通过建立Virtual DOM来追踪如何改变真实DOM,从而实现更高效地更新节点。
    使用Virtual DOM同样也是有部分缺点,代码更多,体积更大,内存占用增大,对于小量的单一的DOM修改使用虚拟DOM成本反而更高,但是整体来说,使用Virtual DOM是优点远大于缺点的。

    每日一题

    https://github.com/WindrunnerMax/EveryDay
    

    参考

    https://juejin.im/post/6844903607913938951
    https://segmentfault.com/a/1190000018211084
    https://github.com/lihongxun945/myblog/issues/32
    https://cloud.tencent.com/developer/article/1004551
    https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html
    https://blog.csdn.net/u010692018/article/details/78799335/
    
    展开全文
  • vue中虚拟DOM原理

    千次阅读 2020-06-06 14:02:51
    相当于在js与DOM之间做了一个缓存,利用patch(diff算法)对比新旧虚拟DOM记录到一个对象按需更新, 最后创建真实的DOM 2、虚拟dom原理流程 模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM vuejs通过...
  • Vue中虚拟dom

    千次阅读 2020-08-10 11:20:27
    传说虚拟DOM。 再来一张图:   是不是一下子秒懂 没懂再来一张  Virtual Dom就先这样,理解了就OK,下面我们了解一下Diff,老规矩先来一句概念: diff算法就是进行虚拟节点对比,并返回一个patch对象,用来...
  • [react] react的虚拟DOMvue虚拟DOM有什么区别? React 是数据先生成 vdom,然后对比 vdom(实现上并非先后顺序,两棵树边遍历边生成新的树),最后通过新的 DOM 树渲染。 Vue 是数据先进性对比,先通过数据的...
  • vue-虚拟dom

    2020-12-20 12:00:57
    要明白diff算法,还是要从dom说起。dom什么是dom?全称:Document Object Model(文档对象模型)是网页用来表示文档对象的标准模型,是针对HTML和XML的API。浏览器生成DOM过程浏览器的主要组件?用户界面:UI布局,...
  • vue中虚拟dom和diff算法

    千次阅读 多人点赞 2021-05-17 16:53:56
    简单理解底层的实现原理
  • Vue中虚拟DOM解析

    2021-05-29 15:31:15
    vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树 为什么需要虚拟dom? 在vue中,渲染视图会调用render函数,这种渲染不仅发生在组件创建时...
  • vue虚拟dom的认识

    2020-03-24 08:37:49
    内存生成虚拟dom树 将内存虚拟dom树初始化渲染成真实的dom树 当我们修改里面的数据的时候,将之前生成的虚拟dom树结合新的数据生成一颗新的虚拟dom树 将此次生成的新的虚拟dom树和之前的dom树进行对比(diff算法...
  • 今天我们来说下vue实例的$mount中都发生了什么。$mount是Vue原型上的方法,是Vue实例化的最后一步。$mount分为带编译器版本和不带编译器版本。我们以下面的代码为例,来讲下在$mount时都发生了什么。实例代码如下...
  • 前端面试之Vue虚拟Dom

    2021-06-06 21:15:54
    在面试的过程,可能也会被问到对虚拟dom理解,像这种面试题是比较宽泛的,面试官想知道你到底知道多少?既然是理解,那就只能是知无不言言无不尽,尽量组织下语言多说点,这样才显得专业素养比较高,接下来,我来...
  • Vue虚拟DOM原理及面试题(笔记)

    千次阅读 2021-03-27 14:06:02
    面试题:请你阐述一下对vue虚拟dom理解 什么是虚拟dom? 虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构 在vue,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味...
  • vue 虚拟dom和diff算法详解

    万次阅读 多人点赞 2021-02-23 16:23:54
    虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验。那么今天我们来详细看看虚拟dom到底是个什么鬼 虚拟dom的定义与作用 什么是虚拟dom ...
  • vue虚拟dom,$refs

    2021-08-31 20:04:58
    虚拟dom就是使用js的object模拟真实的dom,当状态发生变化,更新之前做diff,达到最少操作dom效果 vue为什么引入虚拟DOM? vue1.0响应式粒度太细,Object.defineProperty()每个数据的...vue中虚拟DOM干了啥? 虚拟dom
  • 本篇文章主要介绍了Vue2.x的虚拟DOM diff原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 为什么使用虚拟DOM 手动操作DOM比较麻烦,而且需考虑兼容性,但是随项目复杂度,dom操作更复杂 为了简化DOM的复杂操作出现mvvm框架,解决视图-状态的同步问题 为简化视图操作可使用模板引擎,但是模板没解决跟踪...
  • Vue中虚拟DOM详解

    2020-03-21 14:39:14
    Vue2.0引入了虚拟DOM,比Vue1.0的初始渲染速度提升了2~4倍,并大大降低了内存消耗。目前主流的前端框架Vue、React核心技术也都使用了虚拟DOM,那你一定好奇为什么要提出虚拟DOM虚拟DOM是什么,它有什么优势?下面...
  • Vue基础(实现虚拟dom转换成真实DOM)

    千次阅读 2021-12-14 16:40:29
    nextTick的回调是在下次 DOM 更新循环结束之后执行的延迟回调。可用于获取更新后的 DOMVue中数据更新是异步的,使用nextTick方法可以保证用户定义的逻辑在更新之后执行。 computed和watch区别 computed和watch...
  • 作为国内应用最广的两个框架,Vue 和 React 是前端必须掌握的内容,也是面试的重点。但大多数读者都只擅长其中一个框架,当面试涉及到另一个框架的内容时,就答不好了。比如虚拟dom,两个...
  • Vue中虚拟DOM

    2021-08-01 17:05:04
    文章目录一、什么是虚拟DOM二、虚拟DOM的作用提高性能三、通过模板转换成视图来理解 一、什么是虚拟DOM 我们都知道DOM是什么,它是实实在在的被渲染在页面上的,我们平时的操作都和DOM息息相关。那什么是虚拟DOM?...
  • vue中虚拟dom理解 1.虚拟dom本质上是一个普通的js对象,用于描述视图的界面结构。 2.在vue中,每个组件都有一个render函数,每个函数都会返回一个虚拟dom树,这也意味着每个组件都对应一颗虚拟dom树。 为什么需要...
  • 在前端竞争日益加剧的今天,无法掌握Vue框架核心知识,就意味着自我核心竞争力的丧失。珠峰架构,带你深入探索前端核心原理,赋予你超强市场核心竞争力!【扫码进群直接听课!】(...
  • 猜测是vue使用的虚拟DOM,使得页面虽然已经渲染出来,但在Vue实例让处在在虚拟DOM中,无法获取。 解决方法: 使用Vue.nextTick,看下官方材料: ‘在下次 DOM 更新循环结束之后执行延迟回调’,这句话不是特别...
  • Vue虚拟Dom和Diff原理

    2021-01-08 16:58:53
    1.什么是Virtral DOM? Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM...对于虚拟DOM,咱们来看一个简单的实例,就是下图所示的这个,详细
  • vue虚拟dom和diff算法

    2021-10-18 11:33:03
    1.什么是虚拟DOM? 1.1 DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树,用对象属性来描述节点,...1.2 其实虚拟DOMVue.js主要做了两件事: 提供与真实DOM节点所对应的虚拟节点vnode 将虚拟节点vnod
  • Vue虚拟dom

    2019-10-28 16:51:25
    vue虚拟dom ...2.虚拟dom,通过diff算法,减少性能的消耗 vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。 一棵真实DOM树的渲染需要先解析CSS样式和DOM树,然后将其整合...而虚拟DOM则可以理解为保存了一棵DO...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,530
精华内容 4,212
关键字:

vue中的虚拟dom的理解

vue 订阅