[Vue] 인스턴스

참고 : Vue.js 입문책을 읽고 학습한 내용을 블로그에 정리한 글이므로 내용상 오류가 있을 수 있습니다. 
        오류가 있다면 댓글 남겨주시면 감사하겠습니다.

Vue 인스턴스

• Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
• 데이터 바인딩, 컴포넌트, 템플릿 렌더링 등 여러가지를 동작을 수행

Vue 인스턴스 형식

new Vue({

  ...

});

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 합니다.

생성자를 사용하는 이유는 미리 생성자에 필요한 기능들을 정의 해서

사용자가 ... 부분에 인스턴스 속성들을 사용하여 화면을 개발할 수 있게합니다.

Vue 인스턴스 속성

el	el속성 안에 있는 값과 html 또는 css의 아이디를 연결하는 역할
data	data의 값을 html부분의 {{ }}으로 접근하여 렌더링합니다
template	HTML, CSS 등의 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성
methods	화면 동작과 관련된 로직을 정의하는 속성  ex) 마우스 클릭 이벤트
created	뷰 인스턴스가 생성되고 실행할 로직을 정의할 수 있는 속성

Vue 인스턴스 속성 적용 과정

1. 뷰 라이브러리 파일 로딩

2. 인스턴스 객체 생성(속성 포함)

3. div태그의 id에 인스턴스 el 속성을 붙입니다.

4. 인스턴스 data속성의 text값 'Hi vue'가 div태그안의 {{text}}로 치환됩니다.

5. 치환된 내용{{text}}값을 화면에서 갱신합니다.

뷰 인스턴스 라이프 사이클

라이프 사이클(life cycle) : 인스턴스의 상태에 맞게 호출할 수 있는 속성

라이프 사이클 4단계

인스턴스 생성 -> 인스턴스를 화면에 부착 -> 부착된 인스턴스의 내용 갱신 -> 인스턴스 소멸

(부착 -> 갱신 구간은 데이터가 변경된 경우에만 실행됩니다.)

 

라이프 사이클 세부 내용

(인스턴스 생성)

1. 이벤트 및 라이프 사이클 초기화

2. beforeCreate : data 속성과 methods속성이 아직 인스턴스에 정의 되지 않아서 화면 요소에 접근 불가능한 단계

3. 화면에 반응성 주입

4. created

• data속성과 methods속성이 정의되어서 정의된 값에 접근하여 로직을 실행할 수 있습니다
• 인스턴스가 화면에 부착되기 전이기 때문에 template속성에 정의된 돔 요소로 접근 불가능합니다.
• 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행합니다

5. el, template속성 확인

6. template 속성 내용을 render()로 변환

7. beforeMount : 5,6 내용을 화면에 부착하기 전이라서 render()함수가 호출되기 직전의 로직을 추가하면 좋습니다. 

8. $el 생성 후 el속성 값을 대입

 

(인스턴스를 화면에 부착)

9. mounted

• el 속성에서 지정한 화면 요소에 인스턴스가 부착된 이후에 호출되는 단계
• template속성의 내용을 화면 요소에 접근할 수 있어서 화면 요소를 제어하는 로직을 수행하기 좋은 단계
• 화면에 인스턴스가 부착되자마자 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html코드로 변환되는 시점과 다를 수 있습니다.

(데이터가 변경되는 경우에만)

10. 인스턴스의 데이터 변경

11. beforeUpdate

• 관찰하고 있는 데이터가 바뀌면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
• 변경 예정인 새 데이터에 접근하여 관련된 로직을 미리 넣을 수 있습니다.
• 값을 변경하는 로직을 넣어도 화면은 갱신되지 않습니다.

12. 화면 재 렌더링 및 데이터 갱신

13. updated

• 데이터가 변경된 후 가상 돔으로 다시 화면을 갱신하면 실행되는 단계
• 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점
• 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계

(인스턴스 내용 갱신)

14. 인스턴스 접근 가능

15. beforeDestroy : 인스턴스 접근 가능하여 데이터를 삭제하기 좋은 단계

16. 컴포넌트, 인스턴스 디렉티브 등 모두 해제

17. destroyed : 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들도 파괴

 

(인스턴스 소멸)