vue에서 this에 대해

 ✅ data함수가 일반 function 일 때

vue에서 data함수를 정의할 때 this가 vue 인스턴스 객체를 가리키는게 중요함.

일반적인 function함수를 사용하면 this는 new Vue()에서 new 키워드로 생성한 인스턴스 객체인 "vue인스턴스 객체"를 가리키게 됨.

 
  data() {
    console.log("this", this); // VueComponent
    return {
      list: [{},{}]
      }
    };

 

✅ data함수가 arrow function 일 때 THIS

arrow함수 사용하면 this는 상위 스코프의 this를 가리키게 됨.

따라서 vue인스턴스 객체가 있는 상위 스코프(전역 객체)를 가리키게 되어 undefined가 나오는 것임.

 
  data: () => {
    console.log("this", this); // undefined
    return {
      list: [{},{}]
      }
    };

 

💡vue data는 화살표 함수로 쓰지 말기

공식문서에서도 그렇듯, data를 화살표 함수로 쓰면 this는 컴포넌트 인스턴스 객체가 아니라,

상위 스코프에 있는 this를 가리키기 때문에 다른 객체가 나온다.

 

만일 화살표 함수로 쓴다면 인스턴스 객체(vm)를 매개변수로 넘겨줘야 하는데

굳이 이렇게 복잡하게 할 필요는 없을 것 같다.

 

                         (공식문서 : https://vuejs.org/api/options-state.html#data)

 

 

 

✅ 호출하는 방식에 따라 달라지는 this (vue에서의 활용 예제)

<template>
  <div>
    <ul v-for="item in list" :key="item.title">
      <li @click="item.clickEvt()">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    console.log("this", this); // VueComponent 뷰 인스턴스 객체  
    return {
      list: [
        {
          title: "a",
          clickEvt: function() {
            console.log("this", this); // { title: "a" , clickEvt: ƒ clickEvt()}
          }
        },
        {
          title: "b",
          clickEvt: () => {
            console.log("this", this); // VueComponent  뷰 인스턴스 객체  
          }
        }
      ]
    };
  }
};
</script>

 

1. clickEvt를 일반 function함수로 정의시

clickEvt함수는 메서드로서 사용된 것임.

때문에 메서드가 바인딩 된 객체인 item객체가 this가 되는 것!

 

2. clickEvt를 arrow function으로 정의시

arrow함수가 있는 스코프의 한단계 위의 스코프의 this가 됨.

arrow함수 위의 스코프는 data함수가 나오는데, 이 함수는 vue인스턴스 객체의 프로퍼티에 정의된 메소드임.

때문에 this는 vue인스턴스 객체인 것!

 

 

✅ 느낀점

회사 코드에서 화살표 함수로 되있어서 this가 제대로 나오지 않는 오류가 있었다.

data도 화살표 함수고, 이벤트 함수도 다 화살표 함수였다...

다 리팩토링 대상이다

vue에서는 웬만하면 화살표 함수로 쓰지 말자~!!

---

https://dev.to/js_bits_bill/what-is-this-why-you-should-avoid-arrow-functions-on-vue-methods-a71