使用 onMounted 钩子

Question

我的网站使用 nuxt3 和 vue3。但我在使用 onMounted 挂钩时遇到问题。

这是我的 vue 页面。

<script setup lang="ts">
  import { onMounted } from '@vue/runtime-core';

  onMounted(() => {
    console.log('myheader mounted');
  })
</script>

<template>
    <h1>test</h1>
</template>

我收到此错误：

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

让我很困惑……TT

Answer 1

Nuxt 需要从 导入钩子vue，而不是@vue/runtime-core：

\n

<script setup lang="ts">\n  // import { onMounted } from \'@vue/runtime-core\'; \xe2\x9d\x8c\n  import { onMounted } from \'vue\'; \xe2\x9c\x85\n\n  onMounted(() => {\n    console.log(\'myheader mounted\');\n  })\n</script>\n

\n

演示1

\n

或者改用自动导入。也就是说，省略import, 让 Nuxt 自动onMounted从正确的包导入：

\n

<script setup lang="ts">\n  // onMounted auto imported \xe2\x9c\x85\n\n  onMounted(() => {\n    console.log(\'myheader mounted\');\n  })\n</script>\n

\n

演示2

\n