Text 类型渲染流程

文本类型的 vnode，在 Compile 的 codegen 阶段，我们知道对于文本类型的节点，会生成 _createTextVNode(_toDisplayString(val) + " -- " + _toDisplayString(num) + " ", 1 /* TEXT */)。

这里面有一个区别就是,下述三种类型的文本各自编译的结果是什么

<span>文本1</span> , 可执行代码字符串为：_createElementVNode("div", null, "文本1", -1 /* HOISTED */)
<span>文本2. </span> 可执行代码字符串为：_createElementVNode("div", null, "文本2. " + _toDisplayString(val), 1 /* TEXT */),
<div><span></span>文本1</div> 可执行代码字符串为：_createTextVNode(" 文本1 ")

所以不一定所有的文本都会转换成 TexT 类型的 VNode 的。

具体源码如下

/**
 * 文本类型VNode的生成过程
 *   - 初始化：  直接通过hostCreateText创建一个文本节点，然后通过hostInsert插入到父节点中
 *   - 更新态：  判断children是否不同，如果不同通过hostSetText更新即可( el.textContent = text )
 * @param n1    旧的VNode
 * @param n2    新的VNode
 * @param container
 * @param anchor
 */
const processText: ProcessTextOrCommentFn = (n1, n2, container, anchor) => {
  // 第一次生成
  if (n1 == null) {
    // 调用标签插入DOM的操作，将文本插入父节点下
    hostInsert((n2.el = hostCreateText(n2.children as string)), container, anchor)
    // 更新节点的过程
  } else {
    // 对于文本的更新不需要什么算法 直接 update节点的文本就可以了
    const el = (n2.el = n1.el!)
    if (n2.children !== n1.children) {
      hostSetText(el, n2.children as string)
    }
  }
}

Text 类型渲染流程 ​

Text 类型渲染流程