vue3 toRef 及toRefs 响应式失效( 自上而下 响应式失效 自下而上 可以响应式问题)(待解决)

原因

toRef及toRefs api 第一个形参 只能是一位链式值 如 props 不能是props.detailConfig
如果使用 props.detailConfig 相当于单向绑定 且是反向的 子组件可以改变父组件的值 父组件异步改变不了子组件的值。

问题

通过toRef 及 toRefs 获取props 父组件传递过来的数据 改变父组件的原始数据 子组件无法获取到最新数据 而改变子组件数据 父组件原始数据会随之改变；

let {
    
     isShowJump, showType, jumpUrl } = toRefs(props.detailConfig) as any
    setTimeout(() => {
    
    
      jumpUrl.value = '666'
    }, 1500)
    watch(
      () => {
    
    
        toRefs(props.detailConfig)
      },
      () => {
    
    
        console.log(
          'isReactive(props.detailConfig)',
          isReactive(props.detailConfig)
        )
       console.log('子组件 jumpUrl', jumpUrl.value)
       console.log('父组件 jumpUrl', toRefs(props.detailConfig).jumpUrl?.value)
        // isShowJump.value = props.detailConfig.isShowJump
        // showType.value = props.detailConfig.showType
        // jumpUrl.value = props.detailConfig.jumpUrl
        // console.log('jumpUrl', jumpUrl.value)
      },
      {
    
    
        deep: true
      }
    )
    //结果
    

定时器改变子组件的 jumpUrl,父组件的 jumpUrl也随之改变
而通过点击事件触发 修改父组件的jumpUrl ，子组件的jumpUrl 未改变
但是子组件的watch可以监听到父组件jumpUrl 的变化

解决 （暂无解决方法）

目前折中的方法是 watch监听到数据 重新给子组件的数据赋值