Vue.js 3.0 시작하기

Vue.js 란?

Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework 입니다.

뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있습니다.

 

---

 

MVVM 패턴

뷰(Vue.js)는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는화면단 라이브러리 입니다.

 

• View : 사용자에게 보이는 화면
• DOM : HTML 문서에 들어가는 요소(태그,클래스,속성 등)의 정보를 담고 있는 데이터 트리
• DOM Listener : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
• Model : 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
• Data Binding : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
• ViewModel : 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

 

---

 

Vue의 프로젝트 구조

 

 

 

 

---

 

Life Cycle

어떤 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클이라 합니다. 다시 말해, Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 일컫는 말입니다.

 

 

• beforeCreate : Vue 인스턴스가 초기화 된 직후에 발생합니다.
  
  
• created : created훅에서는 data를 반응형으로 추적할 수 있게 되며 computed, methods, watch 등이 활성화되어 접근이 가능하게 됩니다. 하지만 아직까지 DOM에는 추가되지 않은 상태입니다.
  
  
• beforeMount : DOM에 부착하기 직전에 호출되는 훅입니다. 이 단계 전에서 템플릿이 있는지 없는지 확인한 후 템플릿을 렌더링 한 상태이므로, 가상 DOM이 생성되어 있으나 실제 DOM에 부착되지는 않은 상태입니다.
  
  
• mounted : 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로, this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능합니다.
  
  
• beforeUpdate : 컴포넌트에서 사용되는 data의 값이 변해서, DOM에도 그 변화를 적용시켜야 할 때가 있습니다.이 때, 변화 직전에 호출되는 것이 바로 beforeUpdate훅입니다. 
  
  
• updated : 가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출되는 updated 훅입니다.변경된 data가 DOM에도 적용된 상태입니다. 만약 변경된 값들을 DOM을 이용해 접근하고 싶다면, updated훅이 가장 적절합니다.
  
  
• beforeDestory : 해당 인스턴스가 해체되기 직전에 beforeDestroy훅이 호출됩니다. 아직 해체되기 이전이므로, 인스턴스는 완전하게 작동하기 때문에 모든 속성에 접근이 가능합니다.
  
  
• destoryed : 인스턴스가 해체되고 난 직후에 destroyed 훅이 호출됩니다. 해체가 끝난 이후기 때문에, 인스턴스의 속성에 접근할 수 없습니다. 또한 하위 Vue 인스턴스 역시 삭제됩니다.