javascript - 为什么 Node.childNodes 不返回 vuejs 单文件组件中的所有节点？

Question

来自MDN

Node.childNodes 只读属性返回给定元素的子节点的活动 NodeList，其中第一个子节点的索引为 0。子节点包括元素、文本和注释。

哪个按预期工作

提琴手

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

带有 vue 的代码沙盒

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

标签： javascriptvue.js

Answer 1

比较普通的静态 HTML 和 Vue 呈现的内容非常棘手，因为这是“苹果与梨”的比较。

您提供给 Vue 的模板可能看起来像 HTML，但 Vue 不将其用作 HTML 文本。它解析模板并生成渲染函数，它只是 JavaScript 代码，生成 VNode（虚拟 DOM）

问题是，在解析过程中，Vue 默认会忽略所有无关紧要的空格。

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

可以对比一下在线 Vue 模板资源管理器的区别：

1. 凝结
2. 保存