← Back to rules

vue/no-arrow-functions-in-watch 正しさ

何を実行するか

このルールは、ウォッチャーを定義する際にアロー関数を使用することを禁止します。

なぜ悪いのか

アロー関数は this を文脈的に束縛するため、Vue コンポーネントインスタンスにアクセスできません。
Vue のウォッチャーでは、コンポーネントのデータやメソッド、その他のプロパティとやり取りするために this にアクセスすることがよくあります。
通常の関数またはメソッド短縮記法を使用することで、適切な this のバインディングが保証されます。

例

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

<script>
export default {
  watch: {
    foo: () => {},
    bar: {
      handler: () => {},
    },
    baz: [
      (val) => {},
      {
        handler: () => {},
      },
    ],
  },
};
</script>

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

<script>
export default {
  watch: {
    foo() {},
    bar: function () {},
    baz: {
      handler: function () {},
    },
  },
};
</script>

使い方

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

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/no-arrow-functions-in-watch": "error"
  }
}

CLI

oxlint --deny vue/no-arrow-functions-in-watch --vue-plugin

参照

• ルールのソース