vue3 reactive 数据回显问题

1. reactive

在做项目的时候通常会遇到这种情况，比如我们有一个 Table 显示数据，添加 Table 数据的时候使用 dialog 弹出，在里面填写字段然后添加。

在 vue3 中，对于对象的响应式定义推荐使用 reactive ，那么可以写入如下代码:

const dialogRuleForm = reactive({
  title: "",
  status: "",
  author: "",
});

2. 添加编辑功能

现在添加一个新功能：编辑，我希望添加和编辑使用同一个 dialog, 毕竟两者字段相同,使用数据赋值即可。

fetchApi({id: row.id})
.then((res) => {
  dialogRuleForm = res.data;
})

会发现，这样赋值不会产生效果，那么怎么修改呢。

3. 修改

有三种方法：

1. 使用 ref，把 reactive 改成 ref,如下：

const dialogRuleForm = ref({
  title: "",
  status: "",
  author: "",
});

fetchApi({id: row.id})
.then((res) => {
  dialogRuleForm.value = res.data;
})

千万别忘记，ref 后面要用 .value, 建议使用 vscode 的 volar 插件，勾选 ref sugar.

2. 接着使用 reactive, 不过用一个 key 值代表，如下：

const dialogRuleForm = reactive({
  value: {
    title: "",
    status: "",
    author: "",
  },
});

fetchApi({id: row.id})
.then((res) => {
  dialogRuleForm.value = res.data;
})

好像和 ref 在使用上没区别。

3. 使用 Object.assign(), 如下：

const dialogRuleForm = reactive({
  title: "",
  status: "",
  author: "",
});

fetchApi({id: row.id})
.then((res) => {
  // 如果 res.data 是一个对象
  Object.assign(dialogRuleForm,  res.data);

  // 如果 res.data 是一个数组
  Object.assign(dialogRuleForm,  {...res.data});
})

4. 小技巧
   如果使用同一个 dialog 组件，当关闭 dialog 时，需要清空组件内的数据，如果你的字段过多，就会变成如下情况：

Object.assign(dialogRuleForm, {
  xxx: "",
  xxx: "",
  ...
});

这样写的很累，我们可以在定义 reactive 数据的时候再定义一个 reset, 如下：

const resetForm = reactive({ ...dialogRuleForm });

这样清空数据的时候就可以这样使用：

Object.assign(dialogRuleForm, resetForm);