vue3从接口拿到数据赋值失去响应式的问题

都知道vue3的优点就是响应式数据。因此我们在开发的时候，就会遇到一个问题，我从后端拿到数据后，再赋值的时候，会看到接口的数据并没有运用在页面上。

let detailsObj = reactive({})
function detailsAccount() {
  detailsAccountApi(props.record.id)
    .then((res) => {
      detailsObj = res.data //直接赋值
    })
    .catch((err) => {
      console.log(err)
    })
}

这样写就会使数据丢失了响应性。主要就是vue3的reactive重新赋值无效。

再来看下面这两张图：

let detialsRulesForm = ref<any>({}) 
let detialsRulesForm2 = reactive({})
//赋值
detialsRulesForm.value = res.data
detialsRulesForm2 = res.data
//打印
console.log(detialsRulesForm.value, 'detialsRulesForm.value')
console.log(detialsRulesForm2, 'detialsRulesForm2')

通过这两张图片，我们可以看到使用ref()来赋值的数据前面有proxy，是响应式的数据，而使用reactive({})则就是单纯的数据，因为vue3使用proxy，所以对于对象和数组都不能直接整个赋值。

正确的写法应该是

第一种：使用ref()来实现，也是比较简单方便的。

let detialsRulesForm = ref<any>({}) 
detialsRulesForm = res.data

第二种：还是使用reative来实现，但是我们在reative里面在写一个对象，用obj来装后端拿的数据。

 let detialsRulesForm = reactive<any>({
    obj: {}
  }) 
detialsRulesForm.obj = res.data

第三种：通过遍历来实现响应式数据，我个人是不太喜欢第三种的，代码量有点多余。

let detailsObj = reactive({})
res.data.forEach((item) => {
  detialsRulesForm.push(item)
})

以上就是我在开发过程中遇到的问题和解决方法，我个人认为除了第三种不太推荐，其他两种都可以。