← 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

참고 자료

• 규칙 소스