Vue Instance
특징
1. Vue Instance는 MVVM 패턴의 ViewModel에 해당합니다.
2. Dom(View)와 Plain JavaScript Object(Model) 사이 통신을 해주는 역할을 합니다.
3. Binder를 가지고 있어 View와 Model을 서로 맞춰줘 Data Binding이 자동으로 가능하게 만들어줍니다.
Dom Listener : Dom 의 여러 이벤드들을 감지하고 변경된 내용을 Model에 반영합니다
Directives : JavaScript Object에 있는 내용을 View에 드러날 수 있게 해주는 각종 '지시사항'들입니다(선언적)
Vue Instance는 스크립트 안에 이런식으로 선언해줄수있습니다.
-> el, data, methods, template등으로 인스턴스 옵션 속성을 표현할 수 있습니다.
데이터 관찰, 템플릿 컴파일, Dom 객체에 연결, 데이터 변경시 Dom 업그레이드 초기화 작업을 수행합니다.
Data Property
컴포넌트 내부에 사용할 변수를 생성하고 지정할 수 있습니다.
- Data Binding을 가능하게 해주는 속성입니다.
- 단 한 컴포넌트 내에 정의된 Data는 해당 컴포넌트 내에서만 접근 가능합니다.
컴포넌트가 살아있는 한 내부 Data 변수들은 변경사항을 모두 반영하고 접근 가능합니다.
- 일반적인 JS 문법으로도 접근 가능합니다.
- 코드상에서는 보통 this 키워드를 이용하여 접근합니다.
- 만약 (instance)가 삭제됐다가 다시 만들어졌다면, 초기 상태로 돌아갑니다.
Methods Property
- Vue Instance를 사용하면서 활용 가능한 함수들로 Data, Event, LifeCycle을 활용하는 함수들로 구성됩니다.
LifeCycle Hooks
- Vue Instance의 각 생에 주기별로 호출되는 콜백 함수들입니다.
- 특정 Object의 초기화나 삭제시에 유용합니다.