javascript - 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钩子函数，可以在里面进行操作。你要监听，需要确认数据不是直接被替换而是修改