vue3 异步可响应数据对象不生效

    vue3中使用reactive进行将数据对象转换成可变化响应，reactive等同于vue2的observable。

    在vue3中增加了组件setup方法，这个是在组件创建前和接收到传入参数后，这阶段调用。然后此方法返回的对象是可以被自身或其他组件调用，达到API的效果。

    正常来说，setup是这样使用的。

setup (props) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }

  return {
    repositories,
    getUserRepositories
  }
}

    但如果说，有个属性是需要异步获取，加载后才能再执行。那么setup的写法需要修改一下。

async setup(props) {
    console.log(props);
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }
  const asyncData = reactive({
      p1: null
    });
  asyncData.p1 =  await fetch("http://127.0.0.1/data/d1.json").then(function(response) {
    return response.json();
  });

  
    return {
        repositories,
        getUserRepositories,
        asyncData
      }
  }

    同时，拥有异步setup的组件，在被使用时，需要嵌套在<Suspense>里面。

//如果HelloWorld.vue 是有async setup的组件
//app.vue是使用helloworld组件的父组件
<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <Suspense>
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </Suspense>
</template>

    <Suspense>还能在局部内容等待数据时显示加载中的自定义界面。