对象赋值响应式

vue3，reactive对象在赋值后，变量代理函数变了，失去了响应式

解决方案

使用Object.assign()

import topic from '../../../components/topic.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTopicInfo } from '../../../api/topic'
import { ref, reactive, watch } from 'vue'
let topicInfo = reactive({})
const getTopicDetail = async (id: string) => {
  const res: any = await getTopicInfo({ topicId: id })
// topicInfo = res.data.data // 会失去响应式，视图不更新
// topicInfo = {...res.data.data}  // 解构赋值一样会导致topicInfo失去响应式，视图不更新
  Object.assign(topicInfo, res.data.data)  // 合并对象，仍指向原引用地址
}
onLoad((option) => {
  getTopicDetail(option.topicId!)
})

使用ref

import topic from '../../../components/topic.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTopicInfo } from '../../../api/topic'
import { ref, reactive, watch } from 'vue'
let topicInfo = ref({})
const getTopicDetail = async (id: string) => {
  const res: any = await getTopicInfo({ topicId: id })
    topicInfo.value = res.data.data
}
onLoad((option) => {
  getTopicDetail(option.topicId!)
})