精华内容
下载资源
问答
  • Vue的虚拟dom

    2019-10-28 16:51:25
    vue的虚拟dom 1.操作dom元素需要把html结构销毁之后,然后再进行重新生成,十分消耗性能 2.虚拟dom,通过diff算法,减少性能的消耗 vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。 一棵真实DOM树的渲染需要先...

    vue的虚拟dom
    1.操作dom元素需要把html结构销毁之后,然后再进行重新生成,十分消耗性能
    2.虚拟dom,通过diff算法,减少性能的消耗
    vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。
    一棵真实DOM树的渲染需要先解析CSS样式和DOM树,然后将其整合成一棵渲染树,再通过布局算法去计算每个节点在浏览器中的位置,最终输出到显示器上,
    而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息,而这些信息可以通过对象的形式一直保存在内存中,并通过JavaScript的操作进行维护。
    用传统jquery操作dom的思想,可以先删除,然后再插入新的标签。

    虚拟dom会如何处理上述问题呢?
    第一步:通过树的形式保存旧的dom信息,这些信息可能在页面第一次加载的时候被渲染到浏览器中,但仍是通过虚拟dom的方式创建的
    第二步:检测到数据更新,需要更新dom,先在JavaScript中将需要修改的节点全部修改完成(这个步骤可以进行算法上的优化,会在后面的原理中详细说明)
    第三步:将最终生成的虚拟DOM更新到视图中去。
    需要付出的代价付出的只是在你的内存中需要保存一份可供维护的数据信息

    展开全文
  • vue的虚拟dom

    2021-02-08 14:46:57
  • Vue的虚拟DOM

    2020-03-23 21:49:10
    浏览器加载一个HTML文件大致流程: 1.构建DOM树 2.构建Style Rules,页面样式表 3.把DOM树和样式表综合起来,...传统开发模式,原生JS或者JQ操作DOM时,浏览器会从构建DOM树从头到位执行一边流程,如果我...
    浏览器加载一个HTML文件的大致流程:

    1.构建DOM树
    2.构建Style Rules,页面的样式表
    3.把DOM树和样式表综合起来,形成Render Tree
    4.布局,为每个Render树上的节点确定在显示屏上出现的精确坐标值。
    5.绘制,调用每个节点的paint方法

    JS操作真实DOM的代价

    传统的开发模式,原生JS或者JQ操作DOM时,浏览器会从构建DOM树从头到位的执行一边流程,如果我们用循环更新10个DOM节点,浏览器会从第一个dom请求开始执行,连续对DOM进行9次的更新请求,直到执行10次,浪费性能的同时也容易导致页面卡顿,影响用户体验,频繁且复杂的dom操作通常是前端性能瓶颈的产生点,Vue提供了虚拟dom的解决办法。

    虚拟DOM的核心思想:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。这句话,也许过于抽象,却基本概括了虚拟DOM的设计思想。
    1. 提供一种方便的工具,使得开发效率得到保证
    2. 保证最小化的DOM操作,使得执行效率得到保证

    也就是说,虚拟dom的框架/工具都是这么做的:

    1. 根据虚拟dom树最初渲染成真实dom。
    2. 当数据变化,或者说是页面需要重新渲染的时候,会重新生成一个新的完整的虚拟dom。
    3. 拿新的虚拟dom来和旧的虚拟dom做对比(使用diff算法),得到需要更新的地方之后,再更新内容。

    这样的话,就能大量减少真实dom的操作,提高性能。

    什么是虚拟dom?与key值的关系?

    Virual DOM是用JS对象记录一个dom节点的副本,当dom发生更改时候,先用虚拟dom进行diff计算,算出最小差异,然后再修改真实dom。

    当用传统的方式操作DOM的时候,浏览器会从构建DOM树开始从头到尾执行一遍流程,效率很低。而虚拟DOM是用javascript对象表示的,而操作javascript是很简便高效的。虚拟DOM和真正的DOM有一层映射关系,很多需要操作DOM的地方都会去操作虚拟DOM,最后统一一次更新DOM。因而可以提高性能

    虚拟DOM的Diff算法
    虚拟DOM中,在DOM的状态发生变化时,虚拟DOM会进行Diff运算,来更新只需要被替换的DOM,而不是全部重绘。
    在Diff算法中,只平层的比较前后两棵DOM树的节点,没有进行深度的遍历。
    

    在这里插入图片描述
    我们可以看看上面两颗树的代码,相比于旧的节点数,新的节点p更改为h3标签名,我们称为REPLACE,这是下面第一种情况,新节点中ul的属性名/属性值改变,称为PROPS,是下面的第二种情况,新节点中将div的文本改变,称为TEXT的改变,是下面的第三种情况

    1.如果节点类型改变,直接将旧节点卸载,替换为新节点,旧节点包括下面的子节点都将被卸载,如果新节点和旧节点仅仅是类型不同,但下面的所有子节点都一样时,这样做也是效率不高的一个地方,应该避免无谓的节点类型的变化。
    2.节点类型不变,属性或者属性值改变,不会卸载节点,执行节点更新的操作。
    3.文本改变,直接修改文字内容。
    4.移动,增加,删除子节点时:

    如果想在中间插入节点F,简单粗暴的做法是:卸载C,装载F,卸载D,装载C,卸载E,装载D,装载E。如下图:

    在这里插入图片描述

    写代码时,如果没有给数组或枚举类型定义一个key,就会采用上面的粗暴算法。
    如果为元素增加key后,Vue就能根据key,直接找到具体的位置进行操作,效率比较高。如下图:

    在这里插入图片描述

    本寻着key值相同的即可复用的原则。在v-for中提供key,一方面可以提高性能,一方面也会避免出错

    展开全文
  • vue的虚拟DOM的用法 1、为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架,其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更改后通过...

    vue虚拟DOM是什么?vue的虚拟DOM的用法

    1、为什么需要虚拟DOM

    前面我们从零开始写了一个简单的类Vue框架,其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更改后通过appendChild函数将真实的DOM插入到页面。

    虽然采用的是文档碎片,但是操作的还是真实的DOM。

    而我们知道操作DOM的代价是昂贵的,所以vue2.0采用了虚拟DOM来代替对真实DOM的操作,最后通过某种机制来完成对真实DOM的更新,渲染视图。

    所谓的虚拟DOM,其实就是用JS来模拟DOM结构,把DOM的变化操作放在JS层来做,尽量减少对DOM的操作(个人认为主要是因为操作JS比操作DOM快了不知道多少倍,JS运行效率高)。然后对比前后两次的虚拟DOM的变化,只重新渲染变化了的部分,而没有变化的部分则不会重新渲染。

    比如我们有如下的DOM结构。

    <ul id="list">
    
          <li class="item1">Item 1</li>
    
          <li class="item2">Item 2</li>
    
    </ul>

    我们完全可以用JS对象模拟上面的DOM结构,模拟后就会变成下面的这种结构。

    varvdom = {
    
        tag: 'ul',
    
        attr: {
    
            id: 'list',
    
        },
    
        children: [
    
            {
    
                tag: 'li',
    
                attrs: {
    
                    className: 'item',
    
                    children: ['Item 1']
    
                },
    
            },
    
            {
    
                tag: 'li',
    
                attrs: {
    
                    className: 'item',
    
                    children: ['Item 2']
    
                }
    
            }
    
        ]
    
    
    
    }

    必须要注意一点的是:JS模拟的DOM结构并没有模拟所有DOM节点上的属性、方法(因为DOM节点本身的属性非常多,这也是DOM操作耗性能的一个点),而是只模拟了一部分和数据操作相关的属性和方法。

    2、vue虚拟DOM的用法

    Vue在2.0版本引入了vdom。其vdom是基于snabbdom库所做的修改。snabbdom是一个开源的vdom库。

    snabbdom的主要作用就是将传入的JS模拟的DOM结构转换成虚拟的DOM节点。

    先通过其中的h函数将JS模拟的DOM结构转换成虚拟DOM之后,再通过其中的patch函数将虚拟DOM转换成真实的DOM渲染到页面中。

    为了保证页面的最小化渲染,snabbdom引入了Diff算法,通过Diff算法找出前后两个虚拟DOM之间的差异,只更新改变了的DOM节点,而不重新渲染为改变的DOM节点。

    在这里我不打算分析snabbdom的源码来解释到底snabbdom是怎么干成这件事的(主要是现阶段没到那个水平,哈哈。再者已经有很多同学做过类似的分析,相关链接附在文章末尾)。

    我会从snabbdom的使用角度来看Vue中的虚拟DOM是如何完成视图渲染的。

    我们先看一下snabbdom中两个核心API的功能。

    h()函数:将传入的JS模拟的DOM结构模板转换成vnode。(vnode是一个纯JS对象)

    patch()函数:将虚拟的DOM节点渲染到页面中。

    我们提供一个实例来看一下snabbdom的实际作用。

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <meta name="viewport"content="width=device-width, initial-scale=1.0">
    
        <meta http-equiv="X-UA-Compatible"content="ie=edge">
    
        <title>Document</title></head><body>
    
        <p id="container"></p>
    
        <button id="btn-change">change</button>
    
        <!-- 引入snabbdom库,先不必纠结为什么这样引入,以及每个文件的作用。本篇文章只是介绍一下虚拟DOM的工作方式,并不涉及原理解析
    
        主要是因为博主目前功力尚浅,有兴趣的小伙伴可以另行研究 -->
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
    
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
    
        <script>
    
            //定义patch函数
    
            varpatch = snabbdom.init([
    
                snabbdom_class,
    
                snabbdom_props,
    
                snabbdom_style,
    
                snabbdom_eventlisteners
    
            ])        //定义h函数
    
            varh = snabbdom.h;        //生成一个vnode
    
            varvnode = h('ul#list',{},[
    
                h('li.item',{},['Item 1']),
    
                h('li.item',{},['Item 2']),
    
            ])
    
         //console.log(vnode);
    
            //获取container
    
            varcontainer = document.getElementById('container');
    
            patch(container,vnode);//初次渲染
    
    
    
            varbtn = document.getElementById('btn-change');
    
            btn.onclick = function() {           
    
            varnewVnode = h('ul#list',{},[
    
                    h('li.item',{},['Item 1']),
    
                    h('li.item',{},['Item B']),
    
                    h('li.item',{},['Item 3']),
    
                ])
    
                patch(vnode,newVnode);//再次渲染
    
                vnode = newVnode;//将修改后的newVnode赋值给vnode             
    
                }   
    
                </script>
    
                </body>
    
                </html>

     

    展开全文
  • 浅谈Vue的虚拟dom

    2020-03-23 20:40:57
    Vue的虚拟dom 我们需要带着几个问题思考着来虚拟dom!!! 1. 什么是dom? 2. 什么是虚拟dom?虚拟dom有什么作用和好处? 什么是dom? 在html中dom其实就是节点,即就是html各种的标签在JavaScript中的最大特性其实...
  • 什么是虚拟dom 虚拟dom其实是里面内存型对象(js内存对象)属于内存数据 真实dom的一层映射 ...将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比,对比差异(diff算法) 将对比出来的差异的...
  • 了解Vue的虚拟DOM和diff算法前情提要:一、diff算法首先先来了解一下pachpatchVnodeupdateChildren二、虚拟DOM1、 什么是虚拟DOM?2、为什么使用虚拟DOM?3、虚拟DOM和真实DOM的区别?4、虚拟DOM的好处是什么呢? 前...
  • 虚拟DOM不是真实DOM,而是一个JS对象。它作用是判断DOM是否改变、哪些部分需要被重新渲染。这样,不需要操纵真实DOM,提高了性能。 <div id="content"> <p>{{ 1+1}}</p> <ul class=...
  • Angular脏检查、React虚拟DOM、Vue变化侦测粒度更细的虚拟DOM 通过模板来描述状态与视图的映射关系,会将模板先编译成渲染函数,然后执行渲染函数生成虚拟节点。 中等级别,通知到组件 创建HTML 在vue中创建HTML,...
  • 1.什么是虚拟DOM 用JS按照DOM结构来实现树形结构对象 2.为什么需要虚拟DOM ...2.虚拟DOM最初目的,就是更好跨平台,比如Node.js就没有DOM,如果想实现SSR(服务端渲染),那么一个方式就是借助Virtual DOM,因为Virtua
  • vue框架里面两大核心,虚拟dom和数据双向绑定原理,数据双向绑定原理已经在我另外一篇博客中详细介绍了,本文来了解一下虚拟dom以及与虚拟dom难离难舍diff算法。
  • Vue的虚拟DOM怎么处理

    2019-11-13 11:46:59
    什么是虚拟DOM? DOM也可以用Javascript表示为数据结构。这是有关如何表示DOM节点伪代码: // An unordered list represented as Javascript let domNode = { tag: 'ul', attributes: { id: 'myId' }, children...
  • vue的虚拟DOM和diff算法,是Vue面试的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点。传说中的虚拟DOM。 再来一张图:   是不是一下子秒懂 没懂再来一张  Virtual Dom就...
  • vue高效核心就是虚拟的dom和diff算法 template v-for 遍历一个对象数组 用到了嵌套循环
  • Vue的虚拟DOM和diff算法

    2020-03-19 19:31:49
    https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html
  • v-if实现用户登录和邮箱登录快速切换: ...原因:这是因为Vue在进行DOM渲染之前,会有一个虚拟DOM,出于性能考虑可能会对之前存在元素复用,而不是重新创建一个新元素或空间。 解决方法: ...
  • 本文章是转载的,为了方便以后复习,特地记录一下。他人请去原地址观看!!! ...作者简介:汪玉林,高级工程师,增值产品部前端Leader,目前团队负责手Q游戏中心、手Q...一、前言Vue的核心是双向绑定和虚拟DOM(下文我...
  • vue虚拟DOM

    2020-03-23 23:38:46
    //来学习下vue的虚拟dom 好好学习,天天向上。中国加油,武汉加油,千峰加油!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,476
精华内容 1,390
关键字:

vue的虚拟dom

vue 订阅