vue 监听 props 传object 类型数据不更新显示。

Question

组件A：

<template>
<Shusan :init="ceshi" :age="age" />
<button @click="change" >更新数据</button>
</template>

<script setup>
import { ref ,reactive} from 'vue'
let ceshi=ref({"azu":[1,2,3,4,5],"bzu":[11,12,13,14,15],"czu":[21,22,23,24,25]})
console.log(ceshi);
//这里打印的是Object { __v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: {…}, _value: Proxy }
//console.log(ceshi._rawValue.bzu);可以输出数组:Array(5) [ 11, 12, 13, 14, 15 ]

let change=()=>{
   ceshi={"azu":[11,12,13,14,15],"bzu":[111,112,113,114,115],"czu":[121,122,123,124,125]}
   console.log(ceshi.azu);
   
   age.value=456    
}
</script>

组件B：

<template>
    <div>{{num}}</div>
    <div>{{num1}}</div>
    <div>{{num2}}</div>
    
    <div>{{ageg}}</div>

    <div>{{dex}}</div>    
</template>


<script>

import { ref ,watch,watchEffect,onUpdated,toRefs,reactive} from 'vue'

export default {
    props:{
        init:{type:Object},
      
      
         age: {type:Number
         },                   
    },

    setup(props) {

        let dex=props.init
        let num=props.init.azu
        let num1=props.init.bzu
        let num2=props.init.czu

       let ageg=ref(props.age)
       
//单一的数据类型，如这个age数据是可以实时更新展示的。
       watch(()=>props.age,(n)=>{
        console.log(n);
           ageg.value=n
})


//init数组Object,这里的监听试了很多种方式都无法正常显示，包括添加默认值或者不添加都一样无法更新，只能正常显示初始加载，通过单击事件只能更新年龄这个单一类型数据，Object的数据无法更新。

//问题：这个监听该怎么写才能在单击后正常显示或者更新呢？
     watch(props.init,(n)=>{
        console.log(n,"cesh");           
})

        return {num,num1,num2,ageg,dex}
    },
}
</script>

Answer 1

两个组件修改了一些地方，现在通了，你参考一下
a.vue

<template>
  <Shusan :init="ceshi" :age="age"></Shusan>
  <button @click="change">更新数据</button>
</template>

<script setup>
import Shusan from './b'
import { ref } from 'vue'
let ceshi = ref({
  azu: [1, 2, 3, 4, 5],
  bzu: [1, 2, 3, 4, 5],
  czu: [1, 2, 3, 4, 5]
})
let age = ref(123)
console.log(ceshi)

const change = () => {
  ceshi.value = {
    azu: [11, 12, 13, 14, 15],
    bzu: [111, 112, 113, 114, 115],
    czu: [121, 122, 123, 124, 125]
  }

  age.value = 456
}
</script>

b.vue

<template>
  <div>{{ age }}</div>
  <div>{{ num }}</div>
  <div>{{ num1 }}</div>
  <div>{{ num2 }}</div>
  <div>{{ ageg }}</div>
  <div>{{ dex }}</div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  props: {
    init: { type: Object },
    age: { type: Number }
  },

  setup(props) {
    console.log('props', props.init)
    let dex = ref(props.init)
    let num = ref(props.init.azu)
    let num1 = ref(props.init.bzu)
    let num2 = ref(props.init.czu)

    let ageg = ref(props.age)

    watch(
      () => props.age,
      (n) => {
        console.log('n', n)
        ageg.value = n
      }
    )

    watch(
      () => props.init,
      (n) => {
        console.log('ceshi', n)
        dex.value = n
        num.value = n.azu
        num1.value = n.bzu
        num2.value = n.czu
      }
    )

    return {
      num,
      num1,
      num2,
      ageg,
      dex
    }
  }
}
</script>