← Back to rules

vue/no-arrow-functions-in-watch 正确性

它做了什么

此规则禁止在定义观察者（watcher）时使用箭头函数。

为什么这是不好的？

箭头函数采用词法作用域绑定 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 启用 此规则，可以使用：

配置文件 (.oxlintrc.json)

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

CLI

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

参考资料

• 规则源码