[Do it! Vue.js 입문] 1일차

Vue.js

- 웹페이지 개발의 생산성을 향상을 목적으로 일정한 틀과 규칙에 따라 개발할 수 있도록 미리 화면단의 구조를 정의.

- 2014.02 공식배포

- 배우기 쉽고 리액트, 앵귤러에 비해 성능이 우수하고 빠르다는 장점.

 

<특징> 

- MVVM 패턴

: 모델(Model) - 뷰(View) - 뷰모델(ViewModel)

: 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴

MVVM 패턴

 - 컴포넌트 기반 프레임워크

 : 코드 재사용 용이, HTML 코드엣어서 화면의 구조를 직관적으로 파악 가능. 

 - 앵귤러와 리액트의 장점 결합

  : 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름을 결합. 가상 돔 렌더링 방식으로 성능 향상 

 

 

<뷰 인스턴스 Vue Instance>

- 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 

- new Vue() 생성자. data, el, template, methods, created 등의 옵션 속성 사용

 

뷰인스턴스 라이프 사이클

: 인스턴스의 상태에 따라 호출할 수 있는 속성들

- 라이프 사이클 훅 : 각 라이프 사이클 속성에서 실행되는 커스텀 로직

- 인스턴스 생성 -> 화면에 부착 -> 내용 갱신 -> 소멸의 4단계 

1) beforeCreate

: 속성 정의 X, 돔과 같은 화면 요소에 접근 X

2) Create

: 인스턴스 속성이 정의되어 로직 실행 가능 .돔 요소에 접근 X

3) beforeMount

: 돔에 인스턴스를 부착하기 전 호출되는 단계. render()함수 호출 직전의 로직 추가

4) Mount

: 돔에 인스턴스 부착되고 호출되는 단계. 화면 요소를 제어하는 로직 수행

5) beforeUpdate

: 인스턴스에 정의한 속성들이 화면에 치환. 데이터 관찰. 데이터 값 변경과 관련된 로직 추가.

6) update

 : 데이터 변경 후 가상 돔으로 다시 화면을 그리고 실행되는 단계. 데이터 변경 후 화면요소 제어와 관련된 로직 추가.

7) beforeDestroy

 : 뷰인스턴스의 데이터 삭제

8) Destroy

 : 모든 속성 제거 및 하위 인스턴스 파괴