我使用 Vue 并且在load.js.
async function loadTask(x) {
return await x; // Some async code
}
export { loadTask };
在 Vue 組件中，我呼叫它但await阻止<template>加載。沒有await，下面的代碼運行。我想念什么？
<script setup>
import { loadTask } from './methods/load.js';
const test = loadTask(3);
console.log(await test);
</script>
<template>
<div>Does not run</div>
</template>
uj5u.com熱心網友回復：
根據檔案：
async setup() 必須與 Suspense 結合使用，它目前仍是一個實驗性功能。我們計劃在未來的版本中完成并記錄它 - 但如果你現在好奇，你可以參考它的測驗（打開新視窗）看看它是如何作業的。
https://v3.vuejs.org/api/sfc-script-setup.html#top-level-await
https://v3.vuejs.org/guide/migration/suspense.html#suspense
Vue <script setup> 頂級等待導致模板不呈現
因此，如果您有異步設定，則必須像這樣在父級中匯入此組件：
import { defineAsyncComponent } from "vue";
export default {
components: {
HelloWorld: defineAsyncComponent(() =>
import("./components/HelloWorld.vue")
),
},
};
</script>
并在包裹在懸念中的模板中使用它：
<template>
<suspense>
<template #default>
<HelloWorld />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</suspense>
</template>
演示：
https://codesandbox.io/s/reverent-sinoussi-9r5or?file=/src/components/HelloWorld.vue
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/354539.html
標籤：javascript Vue.js 进口 异步等待 出口
上一篇：php未收到isset($_POST['value'])資料
下一篇：為什么資料沒有寫入檔案？