Vue的diff算法原理你真的了解吗

目录
  • 思维导图
  • 0.从常见问题引入
  • 1.生成虚拟dom
    • 1.h方法实现
    • 2.render方法实现
    • 3.再次渲染
  • 2.diff算法
    • 1.对常见的dom做优化
      • 情况1:末尾追加一个元素(头和头相同)
      • 情况2:队首添加一个节点(尾和尾)
      • 情况3:翻转类型(头和尾)
      • 情况4:暴力比对复用
    • 对于key的探讨
      • 1.为什么不能没有key
      • 2.为什么key不能是index
      • 3.diff的遍历方式
  • 总结

思维导图

0. 从常见问题引入

  • 虚拟dom是什么?
  • 如何创建虚拟dom?
  • 虚拟dom如何渲染成真是dom?
  • 虚拟dom如何patch(patch)
  • 虚拟DOM的优势?(性能)
  • Vue中的key到底有什么用,为什么不能用index?
  • Vue中的diff算法实现
  • diff算法是深度还是广度优先遍历

1. 生成虚拟dom

1. h方法实现

virtual dom ,也就是虚拟节点

1.它通过js的Object对象模拟dom中的节点

2.再通过特定的render方法将其渲染成真实的dom节点

eg:

<div id="wrapper" class="1">
    <span style="color:red">hello</span>
    world
</div>

如果利用h方法生成虚拟dom的话:

h('div', { id: 'wrapper', class: '1' }, h('span', { style: { color: 'red' } }, 'hello'), 'world');

对应的js对象如下:

let vd = {
    type: 'div',
    props: { id: 'wrapper', class: '1' },
    children: [
        {
            type: 'span',
            props: { color: 'red' },
            children: [{}]
        },
        {
            type: '',
            props: '',
            text: 'world'
        }
    ]
}

自己实现一个h方法

 function createElement(type, props = {}, ...children) {
    // 防止没有传值的话就赋值一个初始值
    let key;
    if (props.key) {
        key = props.key
        delete props.key
    }
    // 如果孩子节点有字符串类型的,也需要转化为虚拟节点
    children = children.map(child => {
        if (typeof child === 'string') {
            // 把不是节点类型的子节点包装为虚拟节点
            return vNode(undefined, undefined, undefined, undefined, child)
        } else {
            return child
        }
    })
    return vNode(type, props, key, children)
}
function vNode(type, props, key, children, text = undefined) {
    return {
        type,
        props,
        key,
        children,
        text
    }
}

2. render方法实现

render的作用:把虚拟dom转化为真实dom渲染到container容器中去

export function render(vnode, container) {
    let ele = createDomElementFrom(vnode) //通过这个方法转换真实节点
    if (ele) container.appendChild(ele)
}

把虚拟dom转化为真实dom,插入到容器中,如果虚拟dom对象包含type值,说明为元素(createElement),否则为节点类型(createTextnode),并把真实节点赋值给虚拟节点,建立起两者之间的关系

function createDomElementFrom(vnode) {
    let { type, key, props, children, text } = vnode
    if (type) {//说明是一个标签
        // 1. 给虚拟元素加上一个domElemnt属性,建立真实和虚拟dom的联系,后面可以用来跟新真实dom
        vnode.domElement = document.createElement(type)
        // 2. 根据当前虚拟节点的属性,去跟新真实dom的值
        updateProperties(vnode)
        // 3. children中方的也是一个个的虚拟节点(就是递归把儿子追加到当前元素里)
        children.forEach(childVnode => render(childVnode, vnode.domElement))
    } else {//说明是一个文本
    }
    return vnode.domElement

}

function updateProperties(newVnode, oldProps = {}) {
    let domElement = newVnode.domElement //真实dom,
    let newProps = newVnode.props; //当前虚拟节点中的属性
    // 如果老的里面有,新的里面没有,说明这个属性被移出了
    for (let oldPropName in oldProps) {
        if (!newProps[oldPropName]) {
            delete domElement[oldPropName] //新的没有,为了复用这个dom,直接删除
        }
    }
    // 如果新的里面有style,老的里面也有style,style可能还不一样
    let newStyleObj = newProps.style || {}
    let oldStyleObj = oldProps.style || {}
    for (let propName in oldStyleObj) {
        if (!newStyleObj[propName]) {
            domElement.style[propName] = ''
        }
    }
    // 老的里面没有,新的里面有
    for (let newPropsName in newProps) {
        // 直接用新节点的属性覆盖老节点的属性
        if (newPropsName === 'style') {
            let styleObj = newProps.style;
            for (let s in styleObj) {
                domElement.style[s] = styleObj[s]
            }
        } else {
            domElement[newPropsName] = newProps[newPropsName]
        }
    }

}

根据当前虚拟节点的属性,去更新真实dom的值
由于还有子节点,所以还需要递归,生成子节点虚拟dom的真实节点,插入当前的真实节点里去

3. 再次渲染

刚刚可能会有点不解,为什么要把新的节点和老的节点属性进行比对,因为刚刚是首次渲染,现在讲一下二次渲染

比如说现在构建了一个新节点newNode,我们需要和老节点进行对比,然而并不是简单的替换,而是需要尽可能多地进行复用

首先判断父亲节点的类型,如果不一样就直接替换

如果一样

1.文本类型,直接替换文本值即可

2.元素类型,需要根据属性来替换

这就证明了render方法里我们的oldProps的必要性,所以这里把新节点的真实dom赋值为旧节点的真实dom,先复用一波,待会再慢慢修改

updateProperties(newVnode, oldVNode.props)

export function patch(oldVNode, newVnode) {
    // //判断类型是否一样,不一样直接用新虚拟节点替换老的
    if (oldVNode.type !== newVnode.type) {
        return oldVNode.domElement.parentNode.replaceChild(
            createDomElementFrom(newVnode), oldVNode.domElement
        )
    }
    // 类型相同,且是文本
    if (oldVNode.text) {
        return oldVNode.document.textContent = newVnode.text
    }
    // 类型一样,不是文本,是标签,需要根据新节点的属性更新老节点的属性
    // 1. 复用老节点的真实dom
    let domElement = newVnode.domElement = oldVNode.domElement
    // 2. 根据最新的虚拟节点来更新属性
    updateProperties(newVnode, oldVNode.props)
    // 比较儿子
    let oldChildren = oldVNode.children
    let newChildren = newVnode.children
    // 1. 老的有儿子,新的有儿子
    if (oldChildren.length > 0 && newChildren.length > 0) {
        // 对比两个儿子(很复杂)
    } else if (oldChildren.length > 0) {
        // 2. 老的有儿子,新的没儿子
        domElement.innerHTML = ''
    } else if (newChildren.length > 0) {
        // 3. 新增了儿子
        for (let i = 0; i < newChildren.length; i++) {
            // 把每个儿子加入元素里
            let ele = createDomElementFrom(newChildren[i])
            domElement.appendChild(ele)
        }
    }

}

2. diff算法

刚刚的渲染方法里,首先是对最外层元素进行对比,对于儿子节点,分为三种情况

1.老的有儿子,新的没儿子(那么直接把真实节点的innerHTML设置为空即可)

2.老的没儿子,新的有儿子(那么遍历新的虚拟节点的儿子列表,把每一个都利用createElementFrom方法转化为真实dom,append到最外层真实dom即可)

3.老的有儿子,新的有儿子,这个情况非常复杂,也就是我们要提及的diff算法

1. 对常见的dom做优化

  • 前后追加元素
  • 正序和倒序元素
  • 中间插入元素

以最常见的ul列表为例子

旧的虚拟dom

let oldNode = h('div', {},
    h('li', { style: { background: 'red' }, key: 'A' }, 'A'),
    h('li', { style: { background: 'blue' }, key: 'B' }, 'A'),
    h('li', { style: { background: 'yellow' }, key: 'C' }, 'C'),
    h('li', { style: { background: 'green' }, key: 'D' }, 'D'),
);

情况1:末尾追加一个元素(头和头相同)

新的虚拟节点

let newVnode = h('div', {},
    h('li', { style: { background: 'red' }, key: 'A' }, 'A'),
    h('li', { style: { background: 'blue' }, key: 'B' }, 'B'),
    h('li', { style: { background: 'yellow' }, key: 'C' }, 'C1'),
    h('li', { style: { background: 'green' }, key: 'D' }, 'D1'),
    h('li', { style: { background: 'black' }, key: 'D' }, 'E'),
);

eg:

// 比较是否同一个节点
function isSameVnode(oldVnode, newVnode) {
    return oldVnode.key == newVnode.key && oldVnode.type == newVnode.type
}
// diff
function updateChildren(parent, oldChildren, newChildren) {
    // 1. 创建旧节点开头指针和结尾
    let oldStartIndex = 0
    let oldStartVnode = oldChildren[oldStartIndex];
    let oldEndIndex = oldChildren.length - 1
    let oldEndVnode = oldChildren[oldEndIndex];
    // 2. 创建新节点的指针
    let newStartIndex = 0
    let newStartVnode = newChildren[newStartIndex];
    let newEndIndex = newChildren.length - 1
    let newEndVnode = newChildren[newEndIndex];
    // 1. 当从后面插入节点的时候,希望判断老的孩子和新的孩子 循环的时候,谁先结束就停止循环
    while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
        // 注意:比较对象是否相等,你不能用==,因为指向的位置可能不一样,可以用type和key
        if (isSameVnode(oldStartVnode, newStartVnode)) {
            //patch比对更新
            patch(oldStartVnode, newStartVnode)
            // 移动指针
            oldStartVnode = oldChildren[++oldStartIndex]
            newStartVnode = newChildren[++newStartIndex]
        }
    }
    if (newStartIndex <= newEndIndex) {
        for (let i = newStartIndex; i <= newEndIndex; i++) {
            parent.appendChild(createDomElementFrom(newChildren[i]))
        }
    }
}

情况2:队首添加一个节点(尾和尾)

头和头+尾和尾的处理方法:

我们通过parent.insertBefore(createDomElementFrom(newChildren[i]), beforeElement)使得末尾添加和头部添加采用同一种处理方法

    // 如果是从前往后遍历说明末尾新增了节点,会比原来的儿子后面新增了几个
    // 也可以时从后往前遍历,说明比原来的儿子前面新增了几个
    if (newStartIndex <= newEndIndex) {
        for (let i = newStartIndex; i <= newEndIndex; i++) {
            // 取得第一个值,null代表末尾
            let beforeElement = newChildren[newEndIndex + 1] == null ? null : newChildren[newEndIndex + 1].domElement   parent.insertBefore(createDomElementFrom(newChildren[i]), beforeElement)
        }
    }

图解:

MVVM=>数据一变,就调用patch

情况3:翻转类型(头和尾)

尾和头就不画图了

else if (isSameVnode(oldStartVnode, newEndVnode)) {
                // 头和尾巴都不一样,拿老的头和新的尾巴比较
                patch(oldStartVnode, newEndVnode)
                // 把旧节点的头部插入到旧节点末尾指针指向的节点之后一个
                parent.insertBefore(oldStartVnode.domElement, oldEndVnode.domElement.nextSibling)
                // 移动指针
                oldStartVnode = oldChildren[++oldStartIndex]
                newEndVnode = newChildren[--newEndIndex]
            } else if (isSameVnode(oldEndVnode, newStartVnode)) {
                // 头和尾巴都不一样,拿老的头和新的尾巴比较
                patch(oldEndVnode, newStartVnode)
                // 把旧节点的头部插入到旧节点末尾指针指向的节点之后一个
                parent.insertBefore(oldEndVnode.domElement, oldStartVnode.domElement)
                // 移动指针
                oldEndVnode = oldChildren[--oldEndIndex]
                newStartVnode = newChildren[++newStartIndex]
            } else {

情况4: 暴力比对复用

else {
                // 都不一样,就暴力比对
                // 需要先拿到新的节点去老的节点查找是否存在相同的key,存在则复用,不存在就创建插入即可
                // 1. 先把老的哈希
                let index = map[newStartVnode.key]//看看新节点的key在不在这个map里
                console.log(index);
                if (index == null) {//没有相同的key
                    // 直接创建一个,插入到老的前面即可
                    parent.insertBefore(createDomElementFrom(newStartVnode),
                        oldStartVnode.domElement)
                } else {//有,可以复用
                    let toMoveNode = oldChildren[index]
                    patch(toMoveNode, newStartVnode)//复用要先patch一下
                    parent.insertBefore(toMoveNode.domElement, oldStartVnode.domElement)
                    oldChildren[index] = undefined
                    // 移动指正
                }
                newStartVnode = newChildren[++newStartIndex]
            }
// 写一个方法,做成一个哈希表{a:0,b:1,c:2}
function createMapToIndex(oldChildren) {
    let map = {}
    for (let i = 0; i < oldChildren.length; i++) {
        let current = oldChildren[i]
        if (current.key) {
            map[current.key] = i
        }
    }
    return map
}

对于key的探讨

1. 为什么不能没有key

2. 为什么key不能是index

3. diff的遍历方式

采用的是深度优先,只会涉及到dom树同层的比较,先对比父节点是否相同,然后对比儿子节点是否相同,相同的话对比孙子节点是否相同

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • 详解vue3.0 diff算法的使用(超详细)

    前言:随之vue3.0beta版本的发布,vue3.0正式版本相信不久就会与我们相遇.尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持,proxy响应式原理,重新虚拟dom,优化diff算法性能提升等等.小编在这里仔细研究了vue3.0beta版本diff算法的源码,并希望把其中的细节和奥妙和大家一起分享. 首先我们来思考一些大中厂面试中,很容易问到的问题: 1 什么时候用到diff算法,diff算法作用域在哪里? 2 diff算法是怎么运作的,到底有什么作用? 3 在v-f

  • 简单谈谈Vue中的diff算法

    目录 概述 虚拟Dom(virtual dom) 原理 实现过程 patch方法 sameVnode函数 patchVnode函数 updateChildren函数 结语 概述 diff算法,可以说是Vue的一个比较核心的内容,之前只会用Vue来进行一些开发,具体的核心的内容其实涉猎不多,最近正好看了下这方面的内容,简单聊下Vue2.0的diff算法的实现吧,具体从几个实现的函数来进行分析 虚拟Dom(virtual dom) virtual DOM是将真实的DOM的数据抽取出来,以对象的形式模

  • Vue的虚拟DOM和diff算法你了解吗

    目录 什么是虚拟DOM? 为什么需要虚拟DOM? 总结 在vue 中 数据改变 -> 虚拟DOM(计算变更)-> 操作DOM -> 视图更新 虚拟DOM: js执行速度比较快 什么是虚拟DOM? 用JS模拟DOM结构 为什么需要虚拟DOM? vue中 数据驱动视图,需要用高效方法来控制DOM操作的次数 diff算法: 虚拟DOM的核心 patch函数 两个使用场景: 首次渲染时,判断第一个参数是否是一个真实dom元素,是的话就创建空vnode,并且关联一个DOM元素,然后比较patch函

  • 详解Vue2的diff算法

    前言 双端比较算法是vue2.x采用的diff算法,本篇文章只是对双端比较算法粗略的过程进行了一下分析,具体细节还是得Vue源码,Vue的源码在这 过程 假设当前有两个数组arr1和arr2 let arr1 = [1,2,3,4,5] let arr2 = [4,3,5,1,2] 那么其过程有五步 arr1[0] 和 arr2[0]比较 arr1[ arr1.length-1 ] 和 arr2[ arr2.length-1 ] 比较 arr1[0] 和 arr2[ arr2.length-1

  • 详解vue的diff算法原理

    我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时,vue是怎么更新节点的? 要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?diff算法能够帮助我们. 我们先根据真实DOM生成一颗 virtual DOM ,当

  • vue diff算法全解析

    前言 我们知道 Vue 使用的是虚拟 DOM 去减少对真实 DOM 的操作次数,来提升页面运行的效率.今天我们来看看当页面的数据改变的时候,Vue 是如何来更新 DOM 的.Vue和React在更新dom时,使用的算法基本相同,都是基于 snabbdom. 当页面上的数据发生变化时,Vue 不会立即渲染.而是经过 diff 算法,判断出哪些是不需要变化的,哪些是需要变化更新的,只需要更新那些需要更新的 DOM 就可以了,这样就减少了很多不必要的 DOM 操作,大大提升了性能. Vue就使用了这样

  • Vue的diff算法原理你真的了解吗

    目录 思维导图 0.从常见问题引入 1.生成虚拟dom 1.h方法实现 2.render方法实现 3.再次渲染 2.diff算法 1.对常见的dom做优化 情况1:末尾追加一个元素(头和头相同) 情况2:队首添加一个节点(尾和尾) 情况3:翻转类型(头和尾) 情况4:暴力比对复用 对于key的探讨 1.为什么不能没有key 2.为什么key不能是index 3.diff的遍历方式 总结 思维导图 0. 从常见问题引入 虚拟dom是什么? 如何创建虚拟dom? 虚拟dom如何渲染成真是dom? 虚

  • vue.js diff算法原理详细解析

    目录 diff算法的概念 虚拟Dom h函数 diff对比规则 patch patchVnode updateChildren 总结 diff算法的概念 diff算法可以看作是一种对比算法,对比的对象是新旧虚拟Dom.顾名思义,diff算法可以找到新旧虚拟Dom之间的差异,但diff算法中其实并不是只有对比虚拟Dom,还有根据对比后的结果更新真实Dom. 虚拟Dom 上面的概念我们提到了虚拟Dom,相信大家对这个名词并不陌生,下面为大家解释一下虚拟Dom的概念,以及diff算法中为什么要对比虚拟

  • React diff算法原理详细分析

    目录 抛砖引玉 传统diff算法 React diff原理 tree diff component diff element diff 应用实践 页面指定区域刷新 更加方便地监听props改变 react-router中Link问题 结语 抛砖引玉 React通过引入Virtual DOM的概念,极大地避免无效的Dom操作,已使我们的页面的构建效率提到了极大的提升.但是如何高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处同样也决定着页面的性能,React用其特殊的diff算法解

  • vue的diff算法知识点总结

    源码:https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js 虚拟dom diff算法首先要明确一个概念就是diff的对象是虚拟dom,更新真实dom则是diff算法的结果 Vnode基类 constructor ( ... ) { this.tag = tag this.data = data this.children = children this.text = text this.elm = elm this.ns = u

  • react diff 算法实现思路及原理解析

    目录 事例分析 diff 特点 diff 思路 实现 diff 算法 修改入口文件 实现 React.Fragment 我们需要修改 children 对比 前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有我们常见的 key 的作用. diff 算法使用在子都是数组的情况下,这点和 vue 是一样的.如果元素是其他类型的话直接替换就好. 事例分析 按照之前的 diff 写法,如果元素不

  • 解析Vue 2.5的Diff算法

    DOM"天生就慢",所以前端各大框架都提供了对DOM操作进行优化的办法,Angular中的是脏值检查,React首先提出了Virtual Dom,Vue2.0也加入了Virtual Dom,与React类似. 本文将对于Vue 2.5.3版本中使用的Virtual Dom进行分析. updataChildren是Diff算法的核心,所以本文对updataChildren进行了图文的分析. 1.VNode对象 一个VNode的实例包含了以下属性,这部分代码在src/core/vdom/v

  • 详解为什么Vue中不要用index作为key(diff算法)

    前言 Vue 中的 key 是用来做什么的?为什么不推荐使用 index 作为 key?常常听说这样的问题,本篇文章带你从原理来一探究竟. 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换.或者子元素被删除的特殊情况,提前说明清楚,喷子绕道. 本篇已经收录在 Github 仓库,欢迎 Star: https://github.com/sl1673495/blogs/issues/39 示例 以这样一个列表为例: <ul> <li>1</li> <li>

随机推荐