vue3 如何判断props传输完成

在 Vue3 中，判断 props 传递是否完成并不是直接的，因为 Vue 的数据绑定是响应式的，一旦组件实例化并且接收到 props，它们就会立即生效。然而，如果你希望在 props 到达组件内部时执行一些初始化操作，你可以这样做：

1. 使用 `setup` 函数：Vue3 提供了 `setup` 钩子函数，可以在组件挂载之前运行，此时 props 已经可用。例如：

import { ref } from 'vue';

export default {
  setup(props) {
    const isPropsReady = ref(false); // 初始化一个 ref 用于跟踪 props 是否准备就绪

    // 如果你想检查具体的某个 prop 是否已经存在，可以这么写
    if ('yourPropName' in props) {
      isPropsReady.value = true; // 当 prop 存在时设置为 true
    }

    // 然后你可以监听 isPropsReady 的变化，当它变为 true 时 props 应该已准备好
    watch(isPropsReady, async () => {
      if (isPropsReady.value) {
        // 在这里进行后续依赖 props 的初始化操作
        console.log('Props are ready');
      }
    });

    return {};
  },
};

2. 使用生命周期钩子：虽然官方推荐使用 `setup`，但在某些场景下，你也可以在 `beforeCreate`、`created` 或者 `mounted` 生命周期钩子里检查。

请注意，上述做法更适用于那些需要对 props 进行特殊处理的情况，对于常规的业务逻辑，通常不需要专门去判断 props 是否已经传递完成。如果只是等待 DOM 渲染，Vue会在渲染完成后自动执行相应的生命周期钩子。