赋值 响应式问题

vue2响应式数组重新赋值

如果要重新赋值一个响应式数组，可以使用Vue.set或者 splice 方法。

Vue.set

Vue.set 方法可以用来添加新元素或者替换现有元素。语法如下：

Vue.set(arr, index, newValue)

其中，arr 是要操作的响应式数组，index 是要替换或添加的元素的索引，newValue 是要替换或添加的新元素。

splice

如果要替换整个数组，可以使用 splice 方法。语法如下：

arr.splice(0, arr.length, ...newArr)

其中，arr 是要操作的响应式数组，0 是要删除的起始索引，arr.length 是要删除的元素个数，…newArr 是要添加的新数组。

vue3 reactive 数组重新赋值

在Vue3中，我们可以使用reactive函数创建响应式对象，包括数组。如果要对数组进行重新赋值，可以直接使用=操作符对数组进行覆盖赋值，例如：

import { reactive } from 'vue';

const state = reactive({
  list: ['apple', 'banana', 'orange']
});

state.list = ['grape', 'strawberry', 'blueberry'];

console.log(state.list); // 输出 ['grape', 'strawberry', 'blueberry']

在上面的代码中，我们通过reactive函数创建了一个名为state的响应式对象，其中包含了一个数组list。然后，我们使用=操作符将state.list数组重新赋值为['grape', 'strawberry', 'blueberry']。最后，我们通过console.log输出state.list数组，可以看到它已经被重新赋值成功。

需要注意的是，对数组进行重新赋值会导致视图的全部重新渲染，因此应该尽量避免频繁地对数组进行重新赋值操作。如果只是对数组中的某些元素进行修改，可以直接修改对应的元素，而不需要对整个数组进行重新赋值。

vue2 使用$set 给数组重新赋值
使用$set给数组重新赋值的语法如下：

this.$set(array, index, value);

其中，array是要重新赋值的数组，index是数组中要修改的元素的索引，value是要赋给该元素的新值。

例如，假设有一个数组list，我们想要将索引为2的元素改为'new value'，则可以使用如下代码：

this.$set(list, 2, 'new value');

这将会把list[2]的值从原来的值改为'new value'。需要注意的是，使用$set方法来修改数组中的元素，可以确保Vue能够监听到这个变化并进行响应式更新。