vnode.elm

来源：2-8 update

慕仔6385915

2021-08-09

老师，在patch方法中createElm之前有这么一段

oldVnode = emptyNodeAt(oldVnode)
这个时候oldVnode.elm已经是真实的Dom了

为什么在createElm中还有这么一段

      vnode.elm = vnode.ns
        ? nodeOps.createElementNS(vnode.ns, tag)
        : nodeOps.createElement(tag, vnode)

难道是因为对select需要这种特殊处理吗？

export function createElement (tagName: string, vnode: VNode): Element {
  const elm = document.createElement(tagName)
  if (tagName !== 'select') {
    return elm
  }
  // false or null will remove the attribute but undefined will not
  if (vnode.data && vnode.data.attrs && vnode.data.attrs.multiple !== undefined) {
    elm.setAttribute('multiple', 'multiple')
  }
  return elm
}

写回答

1回答

ustbhuangyi

2021-08-09

首先 createElement 和 createElementNs 最大的区别是底层用 document.createElement 创建 DOM 元素还是用 document.createElementNS 创建 DOM 元素。
大部分情况都会用 document.createElement，但是某些特殊标签，如 svg，有命名空间，就会用 document.createElementNS，具体可参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElementNS

而在 patch 阶段，只有满足新旧节点不同，且旧节点 isRealElement，也就是旧节点是一个真实 DOM 节点的时候，才会执行 emptyNodeAt，这时候 oldVnode.elm 只是一个旧 Vnode 的 DOM 节点，仍然需要执行 createElm 去创建新节点，然后删除旧节点。

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

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

4990 学习 · 1038 问题

查看课程

相似问题

vnode.elm相关问题

回答 1

VNode.elm 属性

回答 1

男神，求教！！！

回答 2

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