← Back to rules

vue/no-lifecycle-after-await 正しさ

何をするか

非同期に登録されたライフサイクルフックを禁止します。

なぜ悪いのか

ライフサイクルフックは、setup() の実行中に同期的に登録する必要があります。 await 文の後にライフサイクルフックが呼び出された場合、登録が遅れすぎて、期待通りに動作しない可能性があります。

例

このルールに対して誤りなコードの例：

<script>
import { onMounted } from "vue";
export default {
  async setup() {
    await doSomething();
    onMounted(() => {
      /* ... */
    }); // エラー
  },
};
</script>

このルールに対して正しいコードの例：

<script>
import { onMounted } from "vue";
export default {
  async setup() {
    onMounted(() => {
      /* ... */
    }); // OK
    await doSomething();
  },
};
</script>

使い方

設定ファイルまたは CLI でこのルールを有効化するには、次のように使用できます：

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/no-lifecycle-after-await": "error"
  }
}

CLI

oxlint --deny vue/no-lifecycle-after-await --vue-plugin

参考情報

• ルールのソース