---
url: /docs/guide/usage/linter/rules/vue/no-arrow-functions-in-watch.md
---

### 作用

此规则不允许在定义 watcher 时使用箭头函数。

### 为什么这不好？

箭头函数会以词法方式绑定 `this`，这意味着它们无法访问 Vue 组件实例。
在 Vue 的 watcher 中，你通常需要访问 `this` 来与组件数据、方法或其他属性交互。
使用普通函数或方法简写可以确保 `this` 正确绑定。

### 示例

此规则的**错误**代码示例：

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

此规则的**正确**代码示例：

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

## 如何使用

## 版本

此规则是在 v1.39.0 中添加的。

## 参考资料