文章插图
前言看到 vue AST 抽象语法树中有这样的定义：
文章插图
中间根据的 child.type 难道是随意定义的吗？我不敢瞎揣测，不过既然是对 document 树的解析，那必然会和 document 扯上关系 。这时我尝试在 F12 中输出 document 看到了 nodeType 属性和这个 child.type 相似 。
个人认为可能有所关系，不过不重要，因为这篇主要讲 document 中的 nodeType 节点类型 。
nodeType 的分类我在 MDN 上搜索 nodeType ，看到如下表格：
文章插图
当然还有一些类型已经废弃，这里不再列举 。通过 nodeType 来定义我们 document 上节点的节点类型，通过代码，你讲看到具体的输出：
这是一段很简单的 html 文件：
文章插图
然后我简单定义了个工具方法，示意 nodeType ：
文章插图
为了使得全部的节点类型输出顺利，我单独针对部分类型处理：
文章插图
然后是常规的 html 元素：
文章插图
回过头看 vue为什么 vue 中的 type 属性只出现了 2、3 （默认 1）？
如果你熟悉其中的 parseHTML 方法，如下应该就是其答案：
文章插图
首先在对 html 解析时，会优先对 注释（COMMENT_NODE，CDATA_SECTION_NODE） 、文档类型（DOCUMENT_NODE，DOCUMENT_TYPE_NODE） 进行判断；另外 vue 本身就是虚拟 Dom 机制，所以也就不需要 DOCUMENT_FRAGMENT_NODE。最后只要匹配 ELEMENT_NODE 和 TEXT_NODE 类型即可（值为 1，3） 。
我们知道 innerHtml 会有 双大括号 表达式，vue 就空出 2 专门用来对表达式解析 。
总结我只是看 vue 渲染代码时，好奇为什么 type 是这样的取值方式 。也许是错的，不过希望各位对 nodeType 这个 document 上的属性有所认识 。
【dom 中的 nodeType 节点类型】
推荐阅读
- 早餐中的营养食物搭配
- 坏了的热水壶不急换新，无非文中的这几种情况，你试试看
- 冰箱中的风冷无霜和直冷哪个好？
- 成长当中的西红柿产生裂口是什么原因 西红柿为什么会发生裂果现象呢
- 吃盐太多当心7种病
- 通过CSS注入窃取HTML中的数据
- 简单聊聊HTTP2.0中的Server Push
- 昆明茶人坊,普洱茶行业中的枝独秀
- 民间祭奠礼仪 传统祭祀礼仪
- UI设计中的留白为什么这么重要？