<script> 如果没有使用生命周期钩子，为什么在标签中调用 a sync函数会失败？

Question

这是一个场景，我有一个组件，在脚本标签中我调用一个动作

<script>
if (something is true) {
await store.doSomething()
}
</script>

组件挂载失败。

当我使用onMounted钩子时，它似乎可以工作。

我是Vue的初学者，但我的问题是，当我不使用钩子时，真正发生了什么?在进行异步调用时是否总是需要使用hook ?

把它放在onMounted中使其工作，尽管之后会遇到其他测试失败。

Answer 1

1. 看看你现在写的东西，你应该有这样的选项API

<script>
export default {
mounted() {
// your code
},
setup() {
// can also use setup here
}
}
</script>

2. With Composition API(注意setup)

<script setup>
onMounted(() => {
// your code
})
</script>

在2.中，如果您不使用onMounted，它将在setup生命周期内运行，如图所示。

---

在进行异步调用时是否总是需要使用hook ?

不完全是，但同时这也取决于你希望它何时/如何运行。首先将其运行到mounted中，总体上更容易和更安全。
特别是因为setup在重新挂载时不会重新运行，这可能会非常令人困惑。
这也完全取决于something is true是什么，关于生命周期+状态。

---

Pinia和Vitest将有自己的事情要考虑。
我建议在继续之前先阅读文档并初步掌握。