Vue2突变为什么只提交第一个元素？

Vue2中的突变（Mutation）是指在组件中修改数据的操作。在Vue2中，当使用v-for指令渲染一个数组时，Vue会为每个数组元素添加一个响应式的getter和setter。当数组发生变化时，Vue会检测到变化并更新视图。

然而，Vue2在处理数组变化时存在一个限制：它只能检测到通过数组的索引进行的变化，而无法检测到通过修改数组长度或直接设置索引的方式进行的变化。这是因为Vue2使用了JavaScript的内置方法来实现数组的响应式，而这些内置方法无法被Vue2所追踪。

具体来说，当我们对一个数组进行突变操作时，Vue2只能检测到以下几种情况：

1. 使用数组的索引修改元素的值，例如arr[0] = newValue；
2. 使用数组的索引添加新的元素，例如arr.splice(index, 0, newValue)；
3. 使用数组的索引删除元素，例如arr.splice(index, 1)。

而对于其他的数组操作，Vue2无法追踪到变化，因此不会触发视图的更新。这也是为什么在Vue2中，当我们对一个数组进行突变操作时，只有第一个元素的变化会被提交。

为了解决这个问题，Vue3引入了响应式系统的重大改进，使用了Proxy来实现对数组的响应式追踪，从而可以检测到更多种类的数组变化。因此，在Vue3中，对数组进行突变操作时，所有变化都会被提交。

总结起来，Vue2只提交第一个元素的原因是因为其响应式系统的实现方式限制了对数组变化的追踪能力，而Vue3通过使用Proxy来实现响应式追踪，解决了这个问题。