为何Vue中扩展运算符转concat后，NodeList转数组结果异常？

1. Vue模板编译的行为原因 #

在Vue 2的模板编译器中，为了简化实现或兼容旧JavaScript环境，会将数组扩展语法[...x]编译为[].concat(x)。Vue 3的编译逻辑已经更新了这部分处理，但如果你使用的是Vue 2，就会触发这个转换逻辑。

2. [...NodeList]与[].concat(NodeList)的核心差异 #

两者处理类数组对象（比如NodeList/HTMLCollection）的逻辑完全不同：

• [...NodeList]依赖迭代器协议：ES6及以后的NodeList实现了Symbol.iterator接口，扩展运算符会遍历迭代器取出每个元素，最终生成一个包含所有DOM节点的平级数组。
• [].concat(NodeList)的参数规则：concat方法只会对Array.isArray()返回true的参数做元素展开。NodeList是类数组对象，但不是数组实例，所以concat会把整个NodeList作为单个元素放入数组，结果就变成了[NodeList]这种嵌套结构，也就是你看到的[[li, li, li]]。

验证示例 #

const ul = document.querySelector('ul');
const nodeList = ul.children;

console.log([...nodeList]); // 输出：[li元素, li元素, li元素]
console.log([].concat(nodeList)); // 输出：[HTMLCollection(3)] （数组内包含一个类数组对象）

补充解决方法（Vue 2环境） #

如果要在Vue模板里正确转换NodeList，可以改用Array.from(theUl.children)，或者在组件的逻辑部分提前将NodeList转为数组后再传递给模板使用。

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