vue3 组合式api中父子组件传值（值为异步请求的数据）

记录： 场景：vue3 ts 组合式api

当父组件给子组件传递值，该值是在父组件通过异步请求获取到的数据；在子组件中有可能是拿不到值的，解决办法：可以在子组件通过watch监听props，

1. 监听 props 中基本数据类型

不能直接监听props.testStr，而是一函数返回值的形式监听

watch(
  () => props.test
  (newVal, oldVal) => {
 
    console.log('new', newVal)
    console.log('old', oldVal)
  }
)

2. 监听 props 中引用数据类型且父组件不改变地址指向

如果传入的数组修改数据是以push这种方式，也就是说在父组件中并没有修改数组的引用地址，那么可以直接监听

watch(props.data, (newVal, oldVal) => {

  console.log('new', newVal)
  console.log('old', oldVal)
})

3. 监听 props 中引用数据类型且父组件改变地址指向

如果像现在这样修改过引用地址那么就需要以函数返回值的形式监听

当父组件传入的是引用类型数据，且在父组件中通过赋值的形式，改变引用数据的引用地址时，在子组件中要使用 getter 函数返回值的形式，才能监听传入的数据

dataList.value=[
    。。。。数据
  ]

watch(
  () => props.data
  (newVal, oldVal) => {
   
    console.log('new', newVal)
    console.log('old', oldVal)
  }
)