原因

在Vue中，props是从父组件流向子组件，在子组件的mounted及之前的生命周期钩子中，子组件只能接收到父组件的第一次props，如果父组件的props改变了，那么子组件在以上这些生命周期钩子中是接收不到的，那么最好的解决办法当然就是在子组件中采用watch来侦听peops的变化。

如下有一个案例是我在实际开发中遇到的，记录下来以防再次踩坑

案例

子组件A：

子组件是elementUI中的tree组件，首先通过向后端获取数据来得到tree的数据，然后拿到父组件传递过来的props进行勾选状态回显

const { state } = useAsyncState(() => getAllMenuTree(),{ data: [] },{onSuccess(res) {if (res) {//子组件通过useAsyncState来获取树形数据console.log('props.checkedKeys',props.checkedKeys);//然后拿到父组件传递过来的props，进行setCheckedKeystreeRef.value?.setCheckedKeys(finalKeys);}},},
);

父组件B：

父组件B也使用useAsyncState方法获取数据，然后把数据中需要回显的数据传递给子组件A，
此时props发生了变化

<template><FilterOrCheck  :checkedKeys="checkedKeys" 
</template>
const checkedKeys = ref<string[]>([]);
const { state, execute } = useAsyncState(() => getAuthDetail(paramsQuery.value),{data: {},},{onSuccess(res) {if (res.code === ResDataCodeEnum.SUCC_0) {checkedKeys.value = res.data.menuIds || [];}},},
);

父组件C：

   父组件C和B一样，也是同样的操作

<template><FilterOrCheck  :checkedKeys="checkedKeys" 
</template>
const checkedKeys = ref<string[]>([]);
const { state } = useAsyncState(() => getPosDetail(postId.value),{ data: {} },{onSuccess(res) {checkedKeys.value = res.data.menuIds || [];},},
);

这个案例的结果是在父组件B使用子组件A时，子组件A打印出来的props.checkedKeys是有值的，但是父组件C使用子组件A的时候，子组件打印出来的是一个空数组，这是为何？

原因是因为父组件B和C他们都是在获取数据之后才改变props的，而A组件也是在获取数据之后才打印props的，如果A组件获取数据的时间比较长，那么在A组件获取到数据的时候，父组件已经获取到数据并传递props给A了，所以A打印出来的props是有的，反之就是没有的，所以解决办法就是为了以防万一，再加上一个watch即可