vue异步props

Vue.js中的异步Props（Asynchronous Properties）是指从父组件到子组件传递数据时，允许子组件在接收到prop值之前就先进行初始化，并在prop实际更新后再进行回调处理。这种特性特别适合于需要等待远程数据加载的情况，比如从API获取的数据。

在子组件中，你可以通过`v-model`, `async`修饰符，以及一个函数作为默认值来声明异步prop。例如：

<template>
  <div v-if="data">
    {{ data }}
  </div>
</template>

<script>
export default {
  props: {
    // 使用 async 和 default 关键字声明异步prop
    data: {
      type: Function,
      async default() {
        return await this.$parent.fetchData(); // 模拟从父组件获取数据的异步操作
      }
    }
  },
  setup(props) {
    // 当data可用时，它会被赋值给组件实例的data变量
    const localData = ref(props.data);
    onMounted(() => {
      localData.value = localData.value; // 确保数据一旦可用就立即更新视图
    });
    return { localData };
  }
};
</script>

当`fetchData()`完成并返回数据时，`localData`将被设置为实际值，然后组件会渲染出正确的内容。