vue3数据更新页面不更新

聆听+自律

已于 2023-08-02 23:04:29 修改

阅读量4.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 vue.js

于 2023-03-14 10:49:53 首次发布

本文链接：https://blog.youkuaiyun.com/m0_70542915/article/details/129519892

文章讨论了在Vue3中使用reactive创建的响应式对象在赋值时可能会丢失响应式的问题。通过示例代码展示了直接赋值导致视图不更新的原因，并提出了解决方案，即使用Object.assign()或分别修改对象属性来保持响应式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


let obj = reactive({
    id: 0,
    name: '123'
})

function setName(){
    obj = {
        id: 0,
        name: '456'
    }
    console.log(obj)
    //{id: 0, name: '456'}
}

以上代码打印出的结果是正确的，视图依然是旧数据，个人觉得是赋值给obj的时候丢失了obj的响应式，解决办法将直接赋值改成Object.assign()即可，assign合并对象并返回目标对象，目标对象的响应式依然在


function setName(){
    obj = Object.assign(obj, { id: 0, name: '456'})
}

变量的响应式丢失自然不会更新页面

vue3的reactive声明的响应式变量赋值方法应该是分别给变量中的属性赋值

function setName() => {
    obj.name = '张三'
    obj.id = '123456'
}