为什么Vue单文件组件中Node.childNodes无法返回所有节点？

结论 #

这是Vue的正常设计行为，不属于bug。

实现原理 #

Vue在编译模板的阶段，默认会自动移除元素之间仅由换行、空格、制表符组成的空白文本节点。这一设计的核心目的是减少不必要的DOM节点数量，降低渲染开销，同时避免无意义的空白节点干扰节点计数、布局计算等逻辑。

注意：只有无实际内容的空白文本节点会被默认过滤，模板中主动写入的带可见内容的文本节点、注释节点都不会被移除，依然会出现在childNodes的返回结果中。
你观察到的原生环境返回长度为7的NodeList、Vue环境仅返回长度为3的结果，本质原因是Vue渲染生成的真实DOM里，原本元素之间的空白文本节点根本不存在，并不是childNodesAPI的行为被篡改。

获取元素内所有节点的方法 #

如果你需要保留模板中的空白文本节点，和原生HTML行为保持一致，可以通过配置Vue的编译器选项开启空白节点保留：

Vue2 配置方式

• 单组件局部配置：

export default {
  whitespace: 'preserve',
  // 其余组件配置
}

• 全局配置（Vue loader）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          preserveWhitespace: true
        }
      }
    ]
  }
}

Vue3 配置方式

• Vite 环境全局配置（vite.config.js）：

export default defineConfig({
  vue: {
    compilerOptions: {
      whitespace: 'preserve'
    }
  }
})

• Vue CLI 环境全局配置（vue.config.js）：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions.whitespace = 'preserve'
        return options
      })
  }
}

开启空白保留配置后，直接使用标准的Node.childNodesAPI即可获取到包含空白文本节点在内的所有子节点，和原生环境行为完全一致。

内容的提问来源于stack exchange，提问作者RDU