Vue中为什么有时候获取不到props?

原因

在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,进行setCheckedKeys
        treeRef.value?.setCheckedKeys(finalKeys);
      }
    },
  },
);

父组件B:

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