vue3中定义的对象再次赋值，页面不会自动更新解决方法

提示💡

reactive()不能替换整个对象，否则响应式就会丢失，只能通过Object.assign(person, data)批量修改对象属性或者依次修改对象属性来实现更新。与 reactive 是对普通对象的代理不同，ref() 具有深层响应性，即使改变嵌套对象或数组时，变化也会被检测到，推荐都使用ref()，需要浅层响应式，可以使用 shallowRef()。

第一种方法：将reactive换成ref，即可实现页面随时刷新：

export default {
  components:{HelloWorld},
  name: 'App',
  setup(){
    let person=ref({})
    const getPerson= (data)=>{
      person.value=data
    }
    return {
      getPerson,
      person
    }
  }
}

第二种方法：在定义reactive的时候，定义属性名，在后期赋值的时候，对属性名进行赋值；

export default {
  components:{HelloWorld},
  name: 'App',
  setup(){
    let person=reactive({
      message:{}
    })
    const getPerson= (data)=>{
      person.message=data
    }
    return {
      getPerson,
      person
    }
  }
}

第二种方法：Object.assign()

export default {
  components:{HelloWorld},
  name: 'App',
  setup(){
    let person=reactive({})
    const getPerson=(data)=>{
      Object.assign(person, data)
    }
    return {
      getPerson,
      person
    }
  }
}

扩展阅读

• 额外的 ref 解包细节
• 为什么要使用 ref！
• 深层响应性​