526互联

Vue3 toRef响应式失效问题排查

发布时间 2023-08-21 16:10:29作者: Better-HTQ

父组件

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变化时，不跟随变化