Vue的reactive对象快速赋值

更新reactive对象的数据时不可直接赋值,否则会丢失响应式。可以使用 Object.assign(targetObj,newObj) 来保留原始的响应式引用,从而让Vue识别到数据更新。

interface Account {
    uid: string
    email: string
    username: string
    avatar: string
    sign: string
    state: string
    role: string
    regDate: string
}
let userListContent: Account[] = reactive([])

onMounted(() => {
    // 初始化获取表格数据
    account.getUserListApi(page.currentPage, page.pageSize).then(res => {
        Object.assign(userListContent, res.data.data.content) // 正确写法
        //userListContent=res.data.data.content //错误写法
    }).catch(error => {
        ElMessage.error(error)
    })
})
posted @ 2025-07-06 21:44  javadoge  阅读(221)  评论(0)    收藏  举报