-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
vuejs 데이터 참조 관련 질문이 있습니다.
21.01.14 06:52 작성 조회수 133
0
컴포넌트 강의 FormComponent 구현 2를 듣던 중
FormComponent.js 를 작성하고 있을 때,
문뜩 data()함수에서 return 하는 객체의 프로퍼티인 inputValue를
어떻게 methods 프로퍼티 안에 onSubmit()함수에서 this.inputValue로 참조를 할 수 있는지 의문이 생겼습니다.
console.log(this)로 하나씩 찍어보면서 확인해본 결과
<submit을 할 때마다 어떻게 나오는지 확인하기 위해서 FormComponent.js의 onSubmit함수에서 찍어보았습니다>
<submit하였을 때 console.log(this)의 결과>
FormComponent 에서 this로 가르키면 VueComponent가 나온다는 것을 알았고 VueComponent에
_data 프로퍼티가 있는 것을 보았습니다. 그래서 this._data.inputValue가 this.inputValue와 같은지 확인해보기 위해서 찍어보았고 서로 같다는 것을 확인했습니다.
전 여기서 두가지가 궁금증이 생겼습니다. 제가 아직 자바스크립트에 대한 이해도가 낮습니다. 해서 아래 두가지의 궁금증에 대한 이론적인 부분을 어떻게 찾아보아야하는지 모르겠습니다. (아마 제가 모르는게 무엇인지 제가 모르는 것 같습니다)
1. 어떻게 data()메소드에서 반환하는 오브젝트가 곧 바로 VueComponent의 _data에 들어가는지...
2. 어떻게 this._data.inputValue로 참조해오지 않고 _data를 생략하고 this.inputValue로만 참조할 수 있는지
답변을 작성해보세요.
0
김정환
지식공유자2021.01.18
1. Vue 라이브러리의 구조 때문입니다. data 메소드에서 반환한 값을 컴포넌트 객체 안에 저장하는데 아마도 _data가 그 역할인 것 같네요.
2. 이것도 마찬가지로 vue 라이브러리가 해주는 영역입니다.
수업에서는 vuejs의 사용법만을 다루고 있어서 질문에 대해서 충분한 답변을 드리지 못했네요. 이런 부분은 vuejs 라이브러리 구조를 학습하시는 것이 도움이 될 것 같습니다. 오픈 소스이기 때문에 깃헙에 공개된 vuejs 소스 코드도 큰 도움이 될 거구요.
호기심을 갖고 질문해 주셔서 무척 감사합니다.
답변 1