在Vue.js中，Loading是常見的一個需求，尤其是在接口請求時，為了提升用戶體驗，通常會在請求過程中顯示一個Loading。

在Vue.js 3中，Loading組件的實現非常簡單，可以使用v-if指令來控制Loading顯示和隱藏。以下是一個示例：

<template>
<div v-if="isLoading">Loading...</div>
<div v-else>主體內容</div>
</template>
<script>
export default {
data() {
return {
isLoading: true
};
},
created() {
// 模擬接口請求
setTimeout(() => {
this.isLoading = false;
}, 2000);
}
};
</script>

通過v-if指令，將Loading組件的顯隱狀態綁定到data中的isLoading屬性上，并在組件創建時通過setTimeout模擬接口請求，在接口返回后將isLoading設為false，從而隱藏Loading組件。

除了通過v-if指令，Vue.js 3還提供了transition組件來實現Loading的過渡效果。

以下是一個使用transition組件實現Loading過渡效果的示例：

<template>
<transition name="fade">
<div v-if="isLoading">Loading...</div>
</transition>
<div v-else>主體內容</div>
</template>
<script>
export default {
data() {
return {
isLoading: true
};
},
created() {
// 模擬接口請求
setTimeout(() => {
this.isLoading = false;
}, 2000);
}
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

在以上示例中，通過transition組件將Loading包裹起來，并指定了name屬性為fade，接著在style標簽中定義了.fade-enter-active、.fade-leave-active、.fade-enter、.fade-leave-to四個類，用來控制Loading的過渡動畫。當isLoading為true時，Loading組件將使用fade-enter樣式進入，進入完成后再加上fade-enter-active樣式，當isLoading為false時，Loading組件將先加上fade-leave樣式，然后再慢慢變成fade-leave-to樣式離開，并在離開完成后再加上fade-leave-active樣式，從而實現Loading的過渡效果。

以上就是Vue.js 3中實現Loading的兩種方式，通過v-if指令和transition組件，可以輕松實現Loading。