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

来源：5-8 组件更新（2）

ominus3

2021-02-18

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

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) 的判断呢？

写回答

1回答

ustbhuangyi

2021-02-18

已采纳

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

ominus3

ustbhuangyi

比方说 case 里 patch 这样两个节点， const vnode1 = new VNode('div', {}, undefined, 'one') const vnode2 = new VNode('div', {}) vnode1 的 text 是 'one'，vnode2 的 text 是 undefined，确实符合问题里的 case，然而实际情况无法生成 vnode1 这样的 vnode。

2021-02-19

共5条回复

Vue.js 源码深入解析深入理解Vue实现原理

全方位讲解 Vue.js 源码，进阶高级工程师

4984 学习 · 1037 问题

查看课程

相似问题

vue怎么判断class变化了

回答 1

关于normallizeArrayChildren函数问题

回答 1

关于 app.vue 组件的 render 函数问题

回答 2

老师我大概总结了一下第二章的内容，想麻烦下您看看大致对不对

回答 1

老师为什么要标记静态节点和静态根节点呢？

回答 1

打开慕课网App查看更多内容