Vue3 中 reactive()中定义的对象再次赋值,页面不会自动更新

在 vue3 里，ref 和 reacitve 都可以定义响应式数据，但是两者有所不同。 在使用 reactive 定义复杂结构的响应式数据时，如果你要对其赋值，会丢失其响应性。然后赋值是我们经常进行的操作，那么该怎么解决呢？

reactive 定义的数据不能直接赋值

// 定义的表单响应式数据
let ruleForm = reactive({
  name: '',
  gender: '',
  age: 20,
  salary: '',
  createtime: new Date().getTime(),
});

// 请求接口成功后表单需要默认初始值

// 需要这样的赋值
const getStudentDetailInfo = () => {
  indexModel.getStudentDetail(id).then((res) => {
    const { code, msg } = res;
    // 这样赋值没效果
    if (code === 200) {
      ruleForm = { ...res };
    }
    // 下面这样赋值可以,但是如果有很多字段,需要写很多
    // ruleForm.name = res.name;
    // ruleForm.gender = res.gender;
    // ruleForm.age = res.age;
    // ruleForm.salary = res.salary;
  });
};

解决方法

• 方法 1: 改为ref定义响应式数据

let ruleForm = ref({
  name: '',
  gender: '',
  age: 20,
  salary: '',
  createtime: new Date().getTime(),
});

ruleForm.value = { ...res };

2.如果是数组的话,可以使用 push 新增数据

const arr = reactive([]);
arr.push(...[1, 2, 3]);

3. 再封装一层数据(推荐!)即定义属性名,在后期赋值的时候,对属性名进行赋值

const state = reactive({
  arr: [],
  ruleForm: {},
});

state.arr = [1, 2, 3];
state.ruleForm = { ...res };

但是这样的话在 html 模板里，使用数据就得 state.arr 所以我们可以用解构将它 return 出来（script setup 里面 不需要 return 解构出来即可）

但是 reactive 解构出来的数据会丢失响应性 所以再用 toRefs()方法为它们添加响应性

最终为:

const state = reactive({
  arr: [],
  ruleForm: {},
});
state.arr = [1, 2, 3];
state.ruleForm = { ...res };
return { ...toRefs(state) };

//如果是在 script setup 里面 不需要return 解构出来即可

const { ruleForm, arr } = toRefs(state);