《Vuejs设计与实现》8.10 文本节点和注释节点

不知道你有没有注意到，在前面几个章节里，我们主要讲的是正常的HTML的标签，也就是vnode.type是div，或者p或者button这种，也就是说vnode.type是一个字符串，其值是HTML的tag名，但有时候，这个type其实不仅仅是字符串，还可以能有更多的类型，更多的扩展性。

在html中还有一种特殊的节点叫注释.<!-- 这是注释 -->

这种节点其实没有一个tag的类型值，因此在vue中，我们需要创建一个新的值来表示这个节点。

const Comment = Symbol()
const vnode = {
    type:Comment,
    children:'这是注释'
}

因此我们之前的判断type是不是字符串还不够，还需要判断这些自定义类型，比如注释类型，纯文本等等。关于判断这块我就不另写了。

我们回忆一些，在之前一个小节，我曾经说过自定义渲染器来实现跨端，我们创建渲染器的时候，给他们传入一组参数

const webOptions = {}
const renderer = createRenderer(webOptions)

那么，我们就可以在webOptions里再次传入一个新的方法

const webOptions = {
    /*省略其他函数*/
    createComment(text){
        return document.createComment(text)
    }
}

这样就实现了创建了创建一个注释节点，当我使用的时候，我们可以先判断节点的类型

if(vnode.type === Comment){
    createComment(vnode.children)
}

纯文本节点也是一样，只不过是调用的API是document.createTextNode.

这一章说实话有点水，作者再书里也是这么水的。其实文本节点和注释节点都是在vue中应用的比较少的，我们应当把这种节点叫做自定义节点。vue中有许多自定义节点，包括下一章要说Fragment也是.

其实我觉得这里面的一些自定义节点其实是完全不需要的，比如这个注释节点，它的存在有时候导致bug，比如下面这个例子,这时候如果你用document.querySelector('div:last-child'),你有可能选中的就是注释节点了

<template>
    <div>
        <p>123</p>
        <!-- 123-->
    </div>
</template>

能不能不编译这个注释节点，只是在代码中显示呢？