详解VUE 数组更新

关于"详解VUE 数组更新"的完整攻略，可以按照以下步骤进行讲解：

1. 首先明确要解决的问题

在 Vue.js 中，当一个数组被直接赋值给一个新变量时，原数组和新变量将引用同一个数组对象。此时，当对其中一个变量进行修改的时候，另一个变量的值也会被同时修改，这样就会影响到 Vue 的响应式更新机制。

例如，下面的代码只是将数组 a 赋值给了变量 b，但在修改 b 的时候，a 的值也会被修改：

let a = [1, 2, 3]
let b = a
b.push(4)
console.log(a)  // [1, 2, 3, 4]

因此，在 Vue 中当我们需要修改原数组时，需要遵照特定的规则进行修改，才能保证 Vue 的响应式更新机制生效。

2. 使用 Vue.set 或 Vue.$set 进行数组添加或更新操作

在 Vue.js 中，我们可以利用 Vue.set 或 Vue.$set 方法来为 Vue 实例上的响应式对象添加一个响应式属性。对于数组来说，我们同样可以使用这两个方法来添加或更新数组元素。

其中，Vue.set(obj, key, value) 和 Vue.$set(obj, key, value) 的作用是相同的。它们的第一个参数 obj 是要添加属性的对象，第二个参数 key 是属性名，第三个参数 value 是属性值，其中最后一个参数 value 如果是对象或者数组类型，同样会被转换为响应式对象。

以下是使用 Vue.set 或 Vue.$set 进行数组添加或更新操作的示例代码：

示例 1：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    }
  },
  methods: {
    add() {
      // 在末尾添加一个元素
      const length = this.list.length
      Vue.set(this.list, length, length + 1)
    }
  }
}
</script>

在上述示例中，我们定义了一个数组 list，然后利用 Vue.set(this.list, length, length + 1) 方法在数组的末尾添加了一个元素。

在这里，需要注意的是，如果我们使用 this.list.push(length + 1) 方法来添加新元素，那么 Vue 并不能检测到新元素的变化，从而无法实现响应式更新。

示例 2：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
        <button @click="remove(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    }
  },
  methods: {
    remove(index) {
      Vue.delete(this.list, index)
    }
  }
}
</script>

在上述示例中，我们定义了一个数组 list，然后利用 Vue.delete(this.list, index) 方法从数组中删除指定位置的元素。

在这里，需要注意的是，如果我们使用 this.list.splice(index, 1) 方法来删除元素，同样是不能实现响应式更新的。

3. 使用 computed 计算属性进行包装

在上述示例中，我们使用了 Vue.set 或 Vue.$set 方法来添加或更新 Vue 中的数组，来解决数组无法响应式更新的问题。

但是，如果我们需要对数组进行某些计算，并将其渲染到页面上，可能会出现相同的问题。即使我们使用 Vue.set 或 Vue.$set 方法来添加或更新数组中的元素，如果该计算是一个简单的计算方法，Vue 还是不能检测到数组的变化。

为了解决这个问题，我们可以使用 Vue 中的 computed 计算属性来对数组进行包装。在计算属性中，我们可以将原始的数组作为依赖项，然后在计算属性中进行计算，从而实现对数组变化的响应式更新。

以下是使用 computed 计算属性进行包装的示例代码：

示例 1：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in newList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    }
  },
  computed: {
    newList() {
      // 在原数组的基础上添加一个元素
      const length = this.list.length
      const newList = this.list.slice()
      Vue.set(newList, length, length + 1)
      return newList
    }
  },
  methods: {
    add() {
      // 直接修改原数组
      const length = this.list.length
      this.list.splice(length, 1, length + 1)
    }
  }
}
</script>

在上述示例中，我们定义了一个数组 list，然后利用 computed 计算属性 newList 进行计算。在计算属性中，我们先将原数组 list 进行拷贝，然后利用 Vue.set 方法在原数组的基础上添加一个元素。这样，当原数组发生变化时，计算属性 newList 也会随之更新。

示例 2：

<template>
  <div>
    <h3>奇数列表</h3>
    <ul>
      <li v-for="(item, index) in oddList" :key="index">
        {{ item }}
      </li>
    </ul>
    <h3>偶数列表</h3>
    <ul>
      <li v-for="(item, index) in evenList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    }
  },
  computed: {
    oddList() {
      return this.list.filter(item => item % 2 === 1)
    },
    evenList() {
      return this.list.filter(item => item % 2 === 0)
    }
  },
  methods: {
    add() {
      // 直接修改原数组
      const length = this.list.length
      this.list.splice(length, 1, length + 1)
    }
  }
}
</script>

在上述示例中，我们定义了一个数组 list，然后利用 computed 计算属性 oddList 和 evenList 分别对数组进行过滤。计算属性 oddList 用于显示奇数列表，计算属性 evenList 用于显示偶数列表。

在这里，需要注意的是，当我们利用 this.list.push(length + 1) 方法来添加新元素时，计算属性 oddList 和 evenList 并不会实时更新。这是因为，这两个计算属性只依赖于原始数组 list，而不依赖于新增的元素。因此，我们需要重新定义一个计算属性来将新增的元素也添加进去，或者利用 Vue.set 方法来添加新元素。