🤔 Vue.js란..?

MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리

• MVVM 패턴을 사용
• Virtual DOM 사용
• React, Angular에 비해 매우 작고 가벼우며 복잡도가 낮음.
• Template와 Componenet를 사용하여 재사용이 가능한 사용자 인터페이스를 View Layer를 정리하여 사용

😎 Vue.js를 배워야 하는 이유

• Angular의 data binding 특성과 react의 virtual dom 기반 렌더링 특징을 모두 가지고 있다.
• 문법이 간편하고 작성하기 쉽다.
• react와 angular에 비해 성능이 우수하고 빠르다.
• react의 장점과 angular의 장점을 가지고 있다.

MVVM 패턴..?

Model - View - ViewModel의 줄임말로 백엔드 로직과 UI의 분리를 위해 설계된 패턴
View 역할 === DOM
Model 역할 === JavaScript
ViewModel역할 === 데이터가 변경될 때마다 즉시 뷰에 반영

• ViewModel이 없는 경우에는 직접 Model과 View를 연결해야 한다.
  *But ViewModel이 중간에서 연결해 주는 것이 MVVM 모델

Reactivity(반응성)

Vue 인스턴스에 JavaScript 객체를 data 옵션으로 전달하면 Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setters로 변환한다. 이는 Vue가 ES5를 사용할수 없는 IE8 이하를 지원하지 않는 이유이다.

• 변환된 데이터 객체가 기록될 때 브라우저가 getter/setter 형식을 다르게 처리하므로 친숙한 인터페이스를 사용하기 위해 vue-devtools를 설치하는 것이 좋다.

모든 컴포넌트 인스턴스에 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 수정된 모든 속성을 기록한다.
나중에 종속적인 setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 렌더링된다.

뷰 인스턴스

인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다.

인스턴스 생성

인스턴스는 아래와 같이 생성할 수 있다.

new Vue();

인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 확인 가능

const vm = new Vue();
console.log(vm);

• 생성자 함수를 사용해서 Vue 객체를 생성하는 이유는 Vue객체의 프로토타입에 미리 필요한 프로퍼티나 메서드를 구현함으로써 Vue 생성자 함수로 만들어낸 모든 인스턴스들이 공유하여 사용할수 있도록 하기 위함

인스턴스 속성과 API

인스턴스에서 사용할 수 있는 속성과 API

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

• el: 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
• template: 화면에 표시할 요소 (HTML, CSS 등)
• data: 뷰의 반응성(Reactivity)가 반영된 데이터 속성
• methods: 화면의 동작과 이벤트 로직을 제어하는 메서드
• created: 뷰의 라이프 사이클과 관련된 속성
• watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

Life Cycle..?

• Vue 인스턴스 또는 컴포넌트가 생성되고 해체하기까지의 과정
• 크게 생성(CREATE) -> DOM에 부착(MOUNT) -> 업데이트(UPDATE) -> 해체(DESTROY) 4가지 과정이 있다.

Life Cycle 단계

1. beforeCreate

• Vue 인스턴스가 초기화 된 직후에 발생
• 컴포넌트가 DOM에 추가되기 전이라 this.$el 접근 불가
• 또한 data, methods등에도 접근 불가

2. created

• data를 반응형으로 추적 가능
• computed, methods, watch 등이 활성화되어 접근이 가능함
• DOM에는 추가되지 않은 상태

3. beforeMount

• DOM에 부착되기 직전에 호출됨
• Virtual DOM이 생성되어 있으나 실제 DOM에 부착되지 않은 상태

4. mounted

• Virtual DOM의 내용이 실제 DOM에 부착되고 난 이후 실행됨
• 모든 요소에 접근 가능

5. beforeUpdate

• 컴포넌트에서 사용되는 data 값의 변화 직전에 호출
• 변화 값을 이용해 Virtual DOM을 렌더링 하기 전
• 이 단계에서 값들을 추가적으로 변화시키더라도 렌더링을 추가로 호출하지 않는다.

6. updated

• Virtual DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출
• 변경된 data가 DOM에도 적용된 상태
• 이 단계에서 data를 변경하는 것은 무한 루프를 일으킬수 있어 절대 금물

7. beforeDestroy

• 해당 인스턴스가 해체되기 직전에 호출됨
• 해체되기 이전이므로 모든 요소에 접근 가능
• 인스턴스가 사라지기 전에 해야할 일들을 이 단계에서 처리

8. destroyed

• 인스턴스가 해체되고 난 직후에 호출
• 인스턴스의 속성 & 요소에 접근 불가
• 하위 Vue 인스턴스 역시 삭제됨

부모 자식 컴포넌트 단계 순서

1. (parent) beforeCreate

2. (parent) created

3. (parent) beforeount

4. (child) beforeCreate

5. (child) created

6. (child) beforeMount

7. (child) mounted

8. (parent) mounted