vue 赋值 响应式问题

数组

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能够监听到这个变化并进行响应式更新。

对象

1.Object.assign()

使用Object.assign函数，不是直接覆盖（不会覆盖所有属性值） ，可以不用每个属性都set进去

2.使用Vue的set方法动态添加回来

this.$set(this.data, 'a', result.data.a);

this.data = result.data; // 不能使用=直接赋值，直接赋值（给覆盖全部值了）
/* a这个属性接口的拿到是没有的，导致data直接失去a这个属性，
再次赋值就想要this.$set设置才有响应式 */