patchVNode 函数中对新旧节点类型的判断

Question

老师您好，我的问题在文档中对应这里的内容

const oldCh = oldVnode.children
const ch = vnode.children
if (isUndef(vnode.text)) {
  if (isDef(oldCh) && isDef(ch)) {
    if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
  } else if (isDef(ch)) {
    if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
  } else if (isDef(oldCh)) {
    removeVnodes(elm, oldCh, 0, oldCh.length - 1)
  } else if (isDef(oldVnode.text)) {
    nodeOps.setTextContent(elm, '')
  }
} else if (oldVnode.text !== vnode.text) {
  nodeOps.setTextContent(elm, vnode.text)
}

我理解的是走到 patchVnode 函数的两个 vnode 说明他们是两个同类型的节点了，第一个逻辑 if (isUndef(vnode.text)) 不就已经表明了 vnode 不是一个文本节点了么，不就也说明 oldVnode 也不是一个文本节点了吗，为什么在下面还有两处 isDef(oldVnode.text) 的判断呢？

Answer 1

ustbhuangyi 2021-02-18 21:40:19

isUndef(vnode.text) 表示新的 vnode 节点不是一个文本节点，但不代表 oldVnode 节点不是一个文本节点，因为 sameVnode 只是 key 和 tag 相同，children 不一定相同喔

• 提问者 ominus3 #1

  谢谢老师，我之前以为 tag 为 undefined 就是文本节点。刚才试了一下发现注释节点 tag 也是 undefined，之前没留意。

• 提问者 ominus3 #2

  但是老师，文本节点、注释节点的 text 最多为空字符串，不会是 undefined。什么情况两个节点会通过 sameVnode 的判断，同时一个是文本节点另一个不是呢？

• ustbhuangyi 回复 提问者 ominus3 #3

  有个技巧，在分支代码中加一段 console.log，然后在源码本地目录通过 npm test 跑本地测试，通过测试看看什么情况下能命中这个分支。

点开查看后面2条评论