都知道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)
})
以上就是我在开发过程中遇到的问题和解决方法,我个人认为除了第三种不太推荐,其他两种都可以。