화살표 함수와 일반 함수의 가장 큰 차이는 this이다.

화살표 함수는 함수를 선언할 때 this가 바인딩되고, 일반 함수는 함수를 호출할 때 this가 바인딩된다.

Vue에서 화살표 함수를 써야 할 때가 있고, 일반 함수를 써야 할 때가 있다.
그 예시에 대해서 알아보자.

화살표 함수 X

//good
methods: {
  clickBtn() {
    console.log(this.data);
  },
},

//error
methods: {
  clickBtn = () => {
    console.log(this.data);
  },
},

화살표 함수로 methods를 정의하면, this값이 window 객체를 가리키기 때문에 data에 접근할 수 없다.

따라서 methods를 정의할 때에는 일반 함수를 쓰도록 하자.

화살표 함수 O

//good
mounted() {
    window.addEventListener("keypress", (e) => {
      if (e.keyCode === 13) this.handleSearchClick();
    });
  },

//error
mounted() {
    window.addEventListener("keypress", function(e) {
      if (e.keyCode === 13) this.handleSearchClick();
    });
  },

콜백함수에서 methods에 접근할 때 일반 함수로 호출하면 this값이 그 함수를 호출한 객체를 가리키게 되어 접근이 불가능하다.

화살표 함수에서의 this값은 바깥의 this값을 가리키기 때문에 정상 작동한다.