vue3 ref声明的变量传递给子组件 监听不到 请问子组件如何正确监听?

Question

父组件用ref声明一数组 然后循环子组件并把数据传递给子组件
当父组件的数据发生变化时 希望子组件能监听到并响应
目前不知道为何没响应.请教哪里出了问题?
是不是这种业务场景最正规的是不是应该用reactive?

<son v-for="item of dataArr" :mydata="item" :key="item.indexCode"></son>

//父组件
setup(){
  const dataArr = ref([{
    name: '1号',
    indexCode: '12333'
  }, {
    name: '2号',
    indexCode: '34225'
  }])
  onMounted(() => {
      setTimeout(() => {
        dataArr.value = [{
          name: '3号',
          indexCode: '12441q3'
        }, {
          name: '4号',
          indexCode: '3eqw45'
        }]
      },1000)
  })
    return {dataArr}
}

//子组件
props: {
  mydata: {
    type: Object,
    default: () => { }
  },
},
setup(props){
   watch(() => props.mydata, (newValue, oldValue) => {
      console.log(newValue) //监听不到
    }, { deep: true })
}

我试了一下 加immediate就可以了 但是我并不想第一次就触发

Answer 1

watch是监听改变，你是整体改变父级数组，并没有改变监听的数组里的单个元素。你的key设置正确，数据改变组件会自动销毁和创建的，不需要做额外的操作，如果相同key的组件数据更改，会触发onUpdated钩子函数，可以在里面进行操作。你要监听，需要确认数据不是直接被替换而是修改