VueJS中onMounted钩子使用async遭ESLint禁止的原因咨询

核心原因 #

async函数有个天生特性：不管你有没有写return语句，它都会自动返回一个Promise对象。而Vue的onMounted钩子要求传入的函数必须返回void（也就是没有有效返回值），你传async函数相当于给钩子返回了一个Promise，这就违反了@typescript-eslint/no-misused-promises规则的校验逻辑——这个规则专门用来排查“在期望返回void的位置返回了Promise”的不合理用法。

反观用.then()的写法，你传入的是普通函数，如果内部没有显式return，默认返回undefined，完全符合钩子对返回值的要求，所以不会触发错误。

解决办法 #

给你几个可行的处理方案：

1. 显式返回undefined：让async函数的返回值符合void类型要求

onMounted(async() => {
  something.value = await fetchValue();
  return undefined;
});

2. 用IIFE包裹异步逻辑：外层是普通函数（返回void），内部执行async逻辑

onMounted(() => {
  (async () => {
    something.value = await fetchValue();
  })();
});

3. 调整ESLint规则（不推荐）：如果确定不需要这个校验，可以在你的ESLint配置文件（比如.eslintrc.js）里修改规则，允许在这类生命周期钩子中使用async函数：

module.exports = {
  // 其他配置...
  rules: {
    '@typescript-eslint/no-misused-promises': [
      'error',
      {
        checksVoidReturn: {
          attributes: false,
        },
      },
    ],
  },
};

内容的提问来源于stack exchange，提问作者Bhanu Prakash War