← Back to rules

vue/valid-next-tick Correctness

🛠️ An auto-fix is available for this rule.

它的作用

强制有效的 nextTick 函数调用。

为什么这不好？

nextTick 是一个函数，它要么接受一个回调，要么返回一个 Promise。 误用（将其当作值访问、传入额外参数、同时 await 并传入回调）几乎总是一个 bug。

示例

以下是此规则的错误代码示例：

<script>
import { nextTick } from "vue";
export default {
  async mounted() {
    nextTick(); // 缺少 await 或回调
    this.$nextTick; // 未调用
    this.$nextTick(a, b); // 参数过多
    await this.$nextTick(callback); // 同时使用 await 和回调
  },
};
</script>

以下是此规则的正确代码示例：

<script>
import { nextTick } from "vue";
export default {
  async mounted() {
    await nextTick();
    this.$nextTick(callback);
    this.$nextTick().then(callback);
  },
};
</script>

如何使用

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/valid-next-tick": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/valid-next-tick": "error",
  },
});

CLI

oxlint --deny vue/valid-next-tick --vue-plugin

版本

此规则添加于 v1.67.0。

参考资料

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground