vue3数据更新页面不更新


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'
}

vue3数据更新页面不更新

悦读