diff整理

diff整理

• 虚拟dom：用js来表达真实dom

• dom渲染：
  真实dom：真实dom->页面节点
  虚拟dom：虚拟dom->真实dom->页面节点

• 虚拟dom算法 = 虚拟dom + diff算法

• diff算法（时间复杂度O(n)）：

  Diff算法比较只会在同层级进行, 不会跨层级比较

  • patch方法：
    sameVnode方法 — 判断当前同层虚拟节点是否为同一类型的虚拟标签
    是：patchVnode方法 — 继续深层比较
    不是：整个替换为新的虚拟节点

    function patch(oldVnode, newVnode) {
           
      // 比较是否为一个类型的节点
      if (sameVnode(oldVnode, newVnode)) {
           
        // 是：继续进行深层比较
        patchVnode(oldVnode, newVnode)
      } else {
           
        // 否
        const oldEl = oldVnode.el // 旧虚拟节点的真实DOM节点
        const parentEle = api.parentNode(oldEl) // 获取父节点
        createEle(newVnode) // 创建新虚拟节点对应的真实DOM节点
        if (parentEle !== null) {
           
          api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 将新元素添加进父元素
          api.removeChild(parentEle, oldVnode.el)  // 移除以前的旧元素节点
          // 设置null，释放内存
          oldVnode = null
        }
      }
    
      return newVnode
    }
    

  • sameVnode方法 — 怎么判断是否为同一标签的虚拟节点？

    function sameVnode(oldVnode, newVnode) {
           
      return (
        oldVnode.key === newVnode.key && // key值是否一样
        oldVnode.tagName === newVnode.tagName && // 标签名是否一样
        oldVnode.isComment === newVnode.isComment && // 是否都为注释节点
        isDef(oldVnode.data) === isDef(newVnode.data) &&