美文网首页
Vue中的diff算法

Vue中的diff算法

作者: Leson17 | 来源:发表于2020-07-17 14:49 被阅读0次

    Vue中的diff算法

    概念:diff算法是一种优化手段,将前后两个模块进行差异化对比,修补(更新)差异的过程叫做patch(打补丁)

    为什么vue,react这些框架中都会有diff算法呢,我们都知道真实dom的开销是很大的,这个跟性能优化中的重绘意义类似。某些时候我们修改了页面中的某个数据,如果直接渲染到真实DOM中会引起整棵树的重绘,那么我们能不能只让我们改变过的数据映射到真实 DOM,做一个最少的重绘呢,这就是diff算法要解决的事情。

    virtual DOM和真实DOM的区别

    virtual DOM是将真实的 DOM 的数据抽取出来,以对象的形式模拟树形结构,diff算法比较的也是virtual DOM

    代码理解

    <div>
      <p>Hello World</p>
    </div>
    // 转换成虚拟节点 类似于下面这种
    const Vnode = {
      tag:'div',
      children:[
        {tag:'p',text:'Hello World'}
      ]
    }
    
    

    diff是如何比较的?

    源码地址https://github.com/vuejs/vue/blob/a702d1947b856cf3b9d6ca5fb27b2271a78a9a5b/src/core/vdom/patch.js#L70

    概括起来就是对操作前后的dom树同一层的节点进行对比,一层一层对比,然后再插入真实的dom中,重新渲染

    vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,那么 key是如何更高效的更新虚拟DOM的呢
    我们看下面的例子

    image

    我们希望可以在B和C之间加一个F,diff算法默认执行起来是这样的:即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?

    所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

    image

    链接:https://www.jianshu.com/p/4f67c3f216a0

    相关文章

      网友评论

          本文标题:Vue中的diff算法

          本文链接:https://www.haomeiwen.com/subject/mmpghktx.html