vue3的对象赋值以及初始化?

Question

场景

初始化一个对象为空{}, 当接口返回数据时, 将获取的数据赋值给stuInfo
或者将已有数据的对象初始化为 {}

const stuInfo = reactive<{name?: string, age?: number}>({})

// 得到数据, 赋值
stuInfo.name = '鹿先森'
stuInfo.age = 27
// ...  数据量很大时很麻烦

问题1: 是否有方法可以一次赋值, 将 cbData 一次赋值给 stuInfo

问题2: 如果stuInfo已经有值, 如何初始化为 {} 对象

基于以下两个方法, 哪个方法更好, 或者还有没有其他更好的方法

const cbData = {
  name: '鹿先森',
  age: 27
}

已知方法 1

对象中新增一个属性 info
对这个属性进行 赋值 以及 清空

const stuInfo2 = reactive<{info: {name?: string, age?: number}}>({ info: {} })
stuInfo2.info = cbData // 赋值
stuInfo2.info = {} // 清空

已知方法 2

使用 ref() 包裹对象
使用 value 对这个属性进行 赋值 以及 清空

const stuInfo3 = ref<{name?: string, age?: number}>({})
stuInfo3.value = cbData // 赋值
stuInfo3.value = {} // 清空

Answer 1

还有一种方法：

const stuInfo = reactive<{name?: string, age?: number}>({})

Object.assign(stuInfo, {name:'dddd', age: 18})

Answer 2

这样呢？

const generateModel = () => {
  return {
    name: '',
    age: 0
  }
}

const stuInfo = ref(generateModel())

onMounted(() => {
  someMethod()
})

const someMethod = () => {
  console.log(stuInfo.value)
  stuInfo.value.name = 'wang'
  stuInfo.value.age = 20
  console.log(stuInfo.value)
  stuInfo.value = generateModel()
  console.log(stuInfo.value)
}