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

第一种方法:将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
    }
  }
}