vue.js移动数组位置,同时更新视图的方法

要移动 Vue 中的数组位置并更新视图，常用的方法是：

1. 使用 splice 方法直接修改数组，再触发更新操作；
2. 使用 Vue.set 或 this.$set 方法，更新数组指定索引值的数据并触发更新操作。

下面分别介绍这两种方法的使用。

1. 使用 splice 方法直接修改数组

最常见的移动数组位置操作就是将某个元素往前或往后移动，以 arr[i] 为例，如果要将其往后移动一位，只需先将其从数组中删除，再通过 splice 方法将其插入到后一位：

// 将数组 arr 中的第 i 个元素往后移动一位
let removed = arr.splice(i, 1)[0];
arr.splice(i + 1, 0, removed);

同理，如果要将其往前移动一位，只需先将其从数组中删除，再插入到前一位：

// 将数组 arr 中的第 i 个元素往前移动一位
let removed = arr.splice(i, 1)[0];
arr.splice(i - 1, 0, removed);

这样就可以移动数组中的某个元素位置了。但是，需要注意的是，这种直接修改数组的方式可能会导致 Vue 的响应式系统失效，不能正确地更新视图。这时需要手动触发更新操作，可以通过以下两种方法之一：

// 上面的移动方式后，可以手动触发数组更新
this.$forceUpdate();
// 或者重新将数组赋值到响应式数据中
this.$set(this, 'arr', arr.slice());

2. 使用 Vue.set 或 this.$set 方法

如果数组的长度不变，只是交换其中两个元素的位置，那么直接修改数组可能会出现问题，这时可以使用 Vue.set 或 this.$set 方法，通过修改数组指定索引的数据来实现移动位置并更新视图。

具体做法是先通过 splice 方法将要移动的元素从数组中删除，再通过 splice 方法将其插入到目标位置。这时需要使用 Vue.set 或 this.$set 方法，将移动后的数据重新赋值给原数组对应索引位置即可：

// 将数组 arr 中的第 i 个元素与第 j 个元素交换位置
let removed = arr.splice(i, 1)[0];
arr.splice(j, 0, removed);
this.$set(this.arr, i, arr[i]);
this.$set(this.arr, j, arr[j]);

这样就可以实现移动数组位置并更新视图的效果了。值得注意的是，这种方法的本质也是修改数组，但通过手动更新 Vue 的响应式数据，可以确保视图正确更新。

示例说明：

例1：将数组中第一个元素往后移动一位

data() {
  return {
    arr: [1, 2, 3, 4, 5]
  };
},
methods: {
  moveForward(index) {
    let removed = this.arr.splice(index, 1)[0];
    this.arr.splice(index + 1, 0, removed);
    // 手动更新响应式数据
    this.$forceUpdate();
  }
}

在模板中使用 v-for 渲染数组，通过 moveForward 方法将数组中的元素往后移动一位：

<template>
  <div>
    <div v-for="(item, index) in arr" :key="index">
      {{ item }}
      <button @click="moveForward(index)">往后移动</button>
    </div>
  </div>
</template>

例2：将数组中第一个元素与第三个元素交换位置

data() {
  return {
    arr: [1, 2, 3, 4, 5]
  };
},
methods: {
  swapPosition(index1, index2) {
    let removed = this.arr.splice(index1, 1)[0];
    this.arr.splice(index2, 0, removed);
    this.$set(this.arr, index1, this.arr[index1]);
    this.$set(this.arr, index2, this.arr[index2]);
  }
}

通过 swapPosition 方法实现数组位置交换：

<template>
  <div>
    <div v-for="(item, index) in arr" :key="index">
      {{ item }}
      <button @click="swapPosition(0, 2)">交换位置</button>
    </div>
  </div>
</template>