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. 修改
有三种方法：
- 使用
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.
- 接着使用
reactive, 不过用一个key值代表，如下：
const dialogRuleForm = reactive({
value: {
title: "",
status: "",
author: "",
},
});
fetchApi({id: row.id})
.then((res) => {
dialogRuleForm.value = res.data;
})
好像和 ref 在使用上没区别。
- 使用
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});
})
- 小技巧
如果使用同一个dialog组件，当关闭dialog时，需要清空组件内的数据，如果你的字段过多，就会变成如下情况：
Object.assign(dialogRuleForm, {
xxx: "",
xxx: "",
...
});
这样写的很累，我们可以在定义 reactive 数据的时候再定义一个 reset, 如下：
const resetForm = reactive({ ...dialogRuleForm });
这样清空数据的时候就可以这样使用：
Object.assign(dialogRuleForm, resetForm);
