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