Vue3 对响应式引用类型变量如何优雅处理数据更新?

Question

Vue3 script setup 自学过程中遇见的问题
需求:定义一个初始数组/对象 发请求获取最新数据 更新页面数据

针对数组->直接puh

<script setup>

const tableData = reactive([]) // 初始数据
const fetch = async () => {
    const res = await proxy.$API.getList(data)// 新数据
    tableData.length = 0 //处理旧数据
    tableData.push(...res.data.dataList)
}
fetch()

针对对象->Object.assign

// 表单数据 - 初始数据
const formData = reactive({ 
  DE: '10086'
})
const getFormData = async () => {
  const res = await new Promise((resolve) => {
    setTimeout(function () {
      resolve({
        DW: '测试数据01',
      });
    }, 2000);
  })
  // 更新数据
  Object.assign(formData, reactive(res))
}
// 发请求
getFormData()

以上代码能实现我的需求,但感觉很不优雅....就像Vue2直接用=把引用类型对象赋值就可以了,但vue3就相对复杂了些.所以来问问有没有更好的实现?
公司升级技术栈,想换Vue3上生产,让我调研下,各位觉得现在时机成熟吗?
说实话这几天写下来感觉vue3没有vue2来的舒服...感觉初步转型的话vue3+选项式API是不是也是一种选择....

Answer 1

用 ref 或者 reactive -> toRefs

Answer 2

const data = reactive({a:'1',b:'2',c:'3'})

//使用toRefs解构
const { a, b, c } = toRefs(data)