为什么Node.childNodes不返回所有节点在vuejs的单一文件组件?

Question

From MDN

节点。childNodes只读属性返回的活动节点列表第一个子节点所在的给定元素的子节点赋值索引0。子节点包括元素、文本和注释。

按预期工作

Jsfiddle

btn.addEventListener('click', ()=>{
console.log(container.childNodes)
})

<div id="container">
<span>A</span>
<span>B</span>
<span>C</span>
</div>
<button id='btn'>Log Nodes</button>

0: "#text"
1: <span>
2: "#text"
3: ...
length: 7

记录每个节点，包括文本节点等。

但是当在Vue中使用时，它只记录没有文本节点的元素。

1: <span>
2: <span>
3: <span>
length: 3

Codesandbox with vue

我知道你不应该在Vue中访问这样的元素，但我想知道这是否是正常的行为，为什么会发生。如何在Vue中获得元素中的所有节点?

Answer 1

比较普通的静态HTML和Vue呈现的内容是非常棘手的，因为它是"苹果和梨";比较。

你给Vue的模板可能看起来像HTML，但Vue不使用它作为HTML文本。它解析模板并生成渲染函数这只是JavaScript代码，生成VNode的(虚拟DOM)

问题是，在解析过程中，默认情况下，Vue倾向于忽略所有无关紧要的空白。

有一个编译器设置控制空格处理。默认值condense会删除大部分空白，而preserve会保留一些空白。

你可以比较在线Vue模板浏览器的差异:

1. 压缩
2. 保存