你应该始终在setup()钩子或<script setup>中同步调用你的composables。调用composables时，最好不要使用await或Promise.all()。例如，以下使用setup()钩子的代码是不推荐的：

<script>
import { ref, watch, onMounted, onUnmounted } from 'vue'
export default {async setup() {const counter = ref(0)watch(counter, () => console.log(counter.value))// ✅ 这个生命周期钩子被调用onMounted(() => console.log('Setup Hook: Mounted'))// ⌛ 开始了一个异步操作await new Promise((resolve) => {setTimeout(() => {console.log('Setup Hook: Resolve await')resolve()}, 1000)})// ☠️ 这个生命周期钩子没有被调用onUnmounted(() => console.log('Setup Hook: Unmounted'))// ⚠️ 观察者工作，但在组件销毁后不会自动释放// 这可能会导致内存泄漏watch(counter, (newCounter) => {console.log('Setup Hook: Watcher', newCounter)})return { counter }},mounted() {console.log('Setup Hook: Mounted', this.count) // 0},
}
</script>

Vue必须知道当前活动的组件实例来注册生命周期钩子、观察者和计算属性。如果你异步调用你的composables，Vue将无法确定当前活动的组件实例，并且不能注册这些功能。

只有在<script setup>中，你可以在使用await之后调用composables。异步操作之后，编译器会自动为你恢复活动实例上下文。