vue3 如何判断props所有属性传输完成

在 Vue 3 中，你可以通过 `setup()` 函数中的 `ref` 和 `onMounted()` 或者自定义事件机制来判断 props 的所有属性是否已经从父组件传递过来并设置完成。这里是一个简单的例子：

import { ref, onMounted } from 'vue';

export default {
  setup(props) {
    const allPropsReceived = ref(false); // 创建一个 ref 来跟踪所有 props 是否已接收

    // 当 props 首次更新时（假设是从父组件传来的）
    Object.keys(props).forEach(key => {
      if (typeof props[key] !== 'undefined') {
        // 如果当前 prop 已经存在并且不是 undefined，则说明所有 props 都已传递
        allPropsReceived.value = true;
        break; // 只需检查第一个即可，因为一旦有一个是确定的就表示全部都来了
      }
    });

    // 使用 onMounted 确保在渲染完成后执行检查
    onMounted(() => {
      if (!allPropsReceived.value) {
        console.error('Some props are still missing or not yet received.');
      }
    });

    return {
      allPropsReceived, // 将这个 ref 作为组件的响应式数据提供给模板使用
    };
  },
}