赋值 响应式问题

vue2响应式数组重新赋值

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

Vue.set

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

Vue.set(arr, index, newValue)
1

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

splice

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

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

其中，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']
1
2
3
4
5
6
7
8
9

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

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

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

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

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

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

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

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