浅谈Vue为什么不能检测数组变动

让我们来详细讲解一下为什么 Vue 不能检测数组变动。

为什么 Vue 不能检测数组变动

首先，需要明确的是，Vue 实例在渲染模板时使用的是虚拟 DOM。当响应式属性发生变化时，Vue 会比较新旧虚拟 DOM，然后仅对变化的部分进行重新渲染，这样可以提高性能。

但是，Vue 不能仅凭虚拟 DOM 来判断数组是否发生变化。这是因为 JavaScript 中的数组是一个引用类型，对数组内容的修改不会改变其引用地址。也就是说，当我们对数组进行修改时，数组的引用地址并没有发生变化，触发响应式更新的仅仅是数组的长度和 $set 方法手动设置的属性。

举个例子，我们有一个如下的 Vue 实例：

new Vue({
  data: {
    fruits: ['apple', 'banana', 'orange']
  }
})

如果我们使用以下方式修改 fruits 数组：

this.fruits[1] = 'pear' // 修改元素位置为1的元素
this.fruits.length = 2 // 从数组末尾删除元素

虽然修改了数组的内容，但 Vue 并不会重新渲染模板，因为根据 Vue 的判断逻辑，数组并没有发生变化。但如果我们使用以下方式修改 fruits 数组：

this.fruits.splice(1, 1, 'pear')

Vue 会检测到数组发生了变动，自动重新渲染模板。这是因为在内部，Vue 使用了数组的变异方法如 splice 来允许检测到变化。这些变异方法的原理是：执行方法时会修改原始数组，导致其引用地址发生变化，从而 Vue 检测到变化并更新模板。但是，如果直接使用 arr[index] = val 的方式来修改数组元素，Vue 就无法检测到变化了。

示例说明

接下来，我们来演示一下以上的两种情况。

示例1：没有检测到数组变动

我们创建一个 Vue 实例，然后在数据中定义一个数组 fruits，再使用 JavaScript 的方式修改 fruits，看看 Vue 是否会检测到数组的变动。

<template>
  <div>
    <div v-for="fruit in fruits" :key="fruit">{{ fruit }}</div>
    <button @click="changeFruits">change</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    changeFruits() {
      this.fruits[1] = 'pear'
      this.fruits.length = 2
    }
  }
}
</script>

在上面的代码中，我们在 data 中定义了一个数组 fruits，并在方法中使用了不带 $set 的方式修改它，这样 Vue 就无法检测到数组变动了。

现在，我们运行该示例，点击 change 按钮，果然发现界面上的数据没有发生变化。这说明 Vue 并没有检测到数组的变动。

示例2：检测到数组变动

同样的，我们创建一个 Vue 实例，然后在数据中定义一个数组 fruits，再使用 Vue 提供的变异方法 splice 修改 fruits，看看 Vue 能否检测到数组的变动。

<template>
  <div>
    <div v-for="fruit in fruits" :key="fruit">{{ fruit }}</div>
    <button @click="changeFruits">change</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    changeFruits() {
      this.fruits.splice(1, 1, 'pear')
    }
  }
}
</script>

在上面的代码中，我们在 data 中定义了一个数组 fruits，并在方法中使用了 Vue 提供的变异方法 splice 修改它，这样 Vue 就能检测到数组变动了。

现在，我们运行该示例，点击 change 按钮，果然发现界面上的数据成功发生了变化。这说明 Vue 此时能够检测到数组的变动。

因此，我们可以得出结论，Vue 只能检测到通过变异方法修改的数组变动，而不能检测到直接改变数组某个元素的情况。