如果< script>没有使用生命周期钩子,为什么在Vue中调用标签内的异步函数失败?

tp5buhyn  于 2022-12-27  发布在  Vue.js
关注(0)|答案(2)|浏览(143)

下面是一个场景,我有一个组件,在script标记中调用一个操作

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

组件无法安装。
当我使用onMounted挂钩时,它似乎起作用了。
我是Vue的初学者,但我的问题是,当我不使用钩子时,实际上会发生什么?当进行异步调用时,是否总是需要使用钩子?
把它放在里面onMounted让它工作,虽然后来遇到了其他测试失败。

wxclj1h5

wxclj1h51#

1.看看您现在编写的内容,您应该拥有如下所示的Options API

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

1.使用合成API(注意setup

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

2.中,如果您不使用onMounted,它将在setup生命周期内运行,如下所示。
当进行异步调用时,是否总是需要使用钩子?
不是真的,但同时这取决于你想让它什么时候/如何运行。最初从运行到mounted开始是的,总体上更容易和更安全地理解。
特别是因为setup在重新安装时不会重新运行,所以可能会非常混乱。
它还取决于something is true到底是什么,关于生命周期+状态。
皮尼亚和维特会有自己的事情要考虑。
我建议在继续之前阅读文档并获得初步的理解。

tf7tbtn2

tf7tbtn22#

在Vue.js中,onMounted钩子是一个生命周期钩子,在组件挂载到DOM之后调用。它是执行需要完全呈现组件的任务的好地方,例如进行异步调用或与DOM交互。
在脚本标记中使用await关键字时,它不在函数的上下文中,因此无法使用await表达式。这就是当您尝试在onMounted挂接外部使用await时遇到错误的原因。
当在Vue中进行异步调用时,使用生命周期钩子或方法通常是一个好主意,因为这允许您以结构化的方式处理调用的结果,并避免潜在的错误。然而,并不总是需要使用钩子,您可以使用其他技术,如事件处理程序或计算属性,在组件中执行异步任务。
如果您仍然无法理解如何在Vue中使用异步调用,您可能需要参考Vue.js文档,或者从在线资源或导师那里寻求额外的指导。

相关问题