更新数组后，vue.js未更新DOM

在Vue.js中，如果你更新了一个数组，但是DOM没有相应地更新，这通常是因为Vue无法检测到数组的变化。Vue.js只能检测到以下几种数组变动：

利用索引直接设置一个项，例如 vm.items[indexOfItem] = newValue
修改数组的长度，例如 vm.items.length = newLength

对于其他数组变动，例如 push(), pop(), shift(), unshift(), splice(), sort(), reverse() 等方法，Vue.js是可以检测到的。

原因

如果你使用了Vue无法检测到的数组变动方法，比如直接通过索引赋值，Vue将不会触发视图更新。

解决方案

使用Vue提供的方法：使用Vue实例的方法，如 vm.$set 或者数组的响应式方法，例如 push, splice 等。

// 错误的做法
this.items[indexOfItem] = newValue;

// 正确的做法
this.$set(this.items, indexOfItem, newValue);
// 或者
this.items.splice(indexOfItem, 1, newValue);

强制更新：如果你确定数据已经改变，但是DOM没有更新，可以使用 vm.$forceUpdate() 方法强制Vue重新渲染组件。

this.items[indexOfItem] = newValue;
this.$forceUpdate();

使用计算属性：如果你的数组更新依赖于其他数据的变化，可以考虑使用计算属性来返回一个新的数组。

computed: {
  computedItems() {
    return this.items.map(item => {
      // 对item进行处理
      return item;
    });
  }
}

示例代码

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItem">Update Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    };
  },
  methods: {
    updateItem() {
      const indexOfItem = 1;
      const newValue = 'Blueberry';
      // 正确的更新方式
      this.$set(this.items, indexOfItem, newValue);
      // 或者
      this.items.splice(indexOfItem, 1, newValue);
    }
  }
};
</script>