search

data functiuon - Function Declarations VS Arrow Function

hashtag
상황

리팩토링 작업을 하던중에 아래 코드와 같이 같은 data 함수인데 어떤 코드엔 ES5 어떤건 ES6 문법인 arrow function으로 작성되어 있었다. 무슨 차이일까 싶어서 찾아 보았다.

//ES5 문법
export default {
   data (){
      return {
         isShow: false,
      }
   }
}
 

//ES6 문법
export default {
   data: () => ({
      return {
         isShow: false,
      }
   })
}

hashtag
결론

뷰 코드에서 props로 받은 데이터를 사용하려면 화살표함수로 만든 data: () => {}는 사용하지 못한다. 이유는 this가 vue Instance 이기 때문!!!

data(){} 일반 함수의 this는 내부에서 부터 값을 찾아내기 때문에 사용이 가능하다.

hashtag
참고

Previousself closing element(tag)Nextinvalid-first-character-of-tag-name.

Last updated