data functiuon - Function Declarations VS Arrow Function

상황

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

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

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

결론

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

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

export default {
   props: {
      isOpen: {
         type: Boolean,
         default: false,
      },
   },
   data: () => ({
      return {
         isShow: this.isOpen,
      }
   })
}

export default {
   props: {
      isOpen: {
         type: Boolean,
         default: false,
      },
   },
   data (){
      return {
         isShow: this.isOpen,
      }
   }
}

참고

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

Last updated