Vue3 toRef响应式失效问题排查

父组件

const stuRecordInfo = ref<any>({
  stuNum: 11111
})

// 接口请求返回
stuRecordInfo.value.stuNum = 22222


<StuRecord :info="stuRecordInfo" :pictureInfo="pictureInfo" />

子组件

const info = toRef(props, 'info')
const stuNum = toRef(info.value, 'stuNum')
stuNum.value = 33333

console.log(info.value.stuNum) // 22222
console.log(stuNum.value) // 33333

原因:
const info = toRef(props, 'info') // 跟随父组件变化

const stuNum = toRef(info.value, 'stuNum') // 初始化时获取引用,info变化时,不跟随变化

posted @ 2023-08-21 16:00  Better-HTQ  阅读(252)  评论(0编辑  收藏  举报