vue3 使用reactive遇到问题

项目前景：

 使用vant-ui弹窗展示，从服务端获取的数据

 // parent.vue
 <template>
  <child :itemData="data" />
 </template>
 <script setup>
 import child from './child.vue' // 这个只是我自己的路径
 1 let data = reactive({day: 0, image: '', exceedCount: 0 })
 
 2 aixo.get('/test/getCount', (res) => {
   const { day, image, count} = res
   data = { day, image, count}
 })
 </script>
 // child.vue
    <template>
       <van-dialog>
        <div class="shop-content">
          <div class="content-left">
            <div class="left-img">
              <img :src="image" alt="" />
              <div class="left-tips" v-if="day">{{ day }}天前加购</div>
            </div>
            <div class="left-text">{{ `${count}个商品` }}</div>
          </div>
        </div>
      </van-dialog>
   </template>
   <script setup>
    import { toRefs } from 'vue'
     const props = defineProps({
       itemData: {
         type: Object,
         default: () => ({})
        }
     })
     const { image, day, count } = toRefs(props.itemData)
   </script>

后面的问题，是child组件，是不能展示parent组件传过来的数据，查询资料以后，parent组件的data重新赋值以后，会失去响应，有如下方法可以解决

方法一

 // parent.vue
 <template>
  <child :itemData="data" />
 </template>
 <script setup>
 1 let data = reactive({value：{ day: 0, image: '', count: 0 }}) // 用reactive的时候，外面再包一层
 
 2 aixo.get('/test/getCount', (res) => {
   const { day, image, count} = res
   data.value = { day, image, count} // 重新赋值
 })
 </script>
 // child.vue
     <template>
       <van-dialog>
        <div class="shop-content">
          <div class="content-left">
            <div class="left-img">
              <img :src="itemData.vlaue.image" alt="" /> // 这样赋值可以的
              <div class="left-tips" v-if="day">{{ itemData.vlaue.day }}天前加购</div> // 这样赋值可以的
            </div>
            <div class="left-text">{{ `${itemData.vlaue.count}个商品` }}</div> // 这样赋值可以的
          </div>
        </div>
      </van-dialog>
   </template>
   <script setup>
    import { toRefs } from 'vue'
     const props = defineProps({
       itemData: {
         type: Object,
         default: () => ({})
        }
     })
     // const { image, day, count } = toRefs(props.itemData.value)  解构以后还是有问题
     // 或则 这个没有试过
     const cartData = computed(() => props.itemData.value)
   </script>

方法二

// parent.vue
 1 let data = ref({ day: 0, image: '', count: 0 }) // 新的写法
 
 2 aixo.get('/test/getCount', (res) => {
   const { day, image, count} = res
   Object.assign(data.value, { day, image, count }) // 重新赋值
 })
 // child.vue
      <template>
       <van-dialog>
        <div class="shop-content">
          <div class="content-left">
            <div class="left-img">
              <img :src="image" alt="" /> // 这样赋值可以的
              <div class="left-tips" v-if="day">{{ day }}天前加购</div> // 这样赋值可以的
            </div>
            <div class="left-text">{{ `${count}个商品` }}</div> // 这样赋值可以的
          </div>
        </div>
      </van-dialog>
   </template>
   <script setup>
   import { toRefs } from 'vue'
   const props = defineProps({
       itemData: {
         type: Object,
         default: () => ({})
        }
    })
   const { image, day, count } = toRefs(props.itemData)
  </script>

具体问题分析可以看如下链接
https://blog.csdn.net/forever__fish/article/details/127675308