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变化时,不跟随变化
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步