vue的diff算法

最新推荐文章于 2022-12-20 15:07:32 发布

julansu

最新推荐文章于 2022-12-20 15:07:32 发布

阅读量199

点赞数

分类专栏： vue js 文章标签： vue diff 虚拟dom

本文链接：https://blog.csdn.net/qq_36154096/article/details/100013790

版权

本文介绍了Vue的Diff算法，用于高效地更新虚拟DOM。主要步骤包括：检查oldnode是否存在，同一节点的比较，文本节点的替换，非文本节点的处理，以及关键的子元素遍历算法，通过key值优化提高效率。Vue的Diff算法避免了传统算法的高时间复杂度，实现了O(n)的时间复杂度。

摘要由CSDN通过智能技术生成

vue的diff算法

有两个dom，vnode和oldnode

一、首先判断oldnode存在情况，不存在直接用vnode创建元素。

function patch (oldVnode, vnode) {
    // some code
    if (sameVnode(oldVnode, vnode)) {
    	patchVnode(oldVnode, vnode)
    } else {
    	const oEl = oldVnode.el // 当前oldVnode对应的真实元素节点
    	let parentEle = api.parentNode(oEl)  // 父元素
    	createEle(vnode)  // 根据Vnode生成新元素
    	if (parentEle !== null) {
            api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 将新元素添加进父元素
            api.removeChild(parentEle, oldVnode.el)  // 移除以前的旧元素节点
            oldVnode = null
    	}
    }
    // some code 
    return vnode
}

二、oldnode存在时，调用sameVnode函数，判断是不是同一个node，不是同一个node的时候，删除oldnode，新加vnode。

function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

三、是同一个node的时候，判断vnode是不是文本节点，vnode是文本节点的时候，直接用vnode替换oldnode里面的内容。

四