vue3中的reactive对象赋值问题

Question

对象

const roleInfo: UnwrapRef<Role> = reactive({
                id: undefined,
                name: '',
                nameZh: '',
                crateTime:undefined,
                creator: '',
                summary:''
            });

赋值

const handleEdit = (role :Role)=>{
                addFlag.value = false;
                visible.value = true;
                roleInfo.id = role.id;
                roleInfo.name = role.name;
                roleInfo.nameZh = role.nameZh;
                roleInfo.crateTime = role.crateTime;
                roleInfo.creator = role.creator;
                console.log(roleInfo)
            }

这个怎么快速的赋值呢？并且可以被监听到，不会丢掉响应性

Answer 1

需要做点改造，有两种方式：

---

使用reactive

你需要再嵌套一层，如：

`const roleInfo = reactive({data: {
xxx: 'ooo'
}})`

更新时：

roleInfo.data = { xxx: 'aaa' }

---

使用ref

const roleInfo = ref({xxx: 'ooo'})

更新：

roleInfo.value = { xxx: 'aaa' }

Answer 2

Object.assign(roleInfo, newObj)