[Vue.js]뷰 인스턴스 및 라이프 사이클

＊뷰 인스턴스의 정의와 속성

＊뷰 인스턴스 생성자

1. new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 칭한다.

2. Vue 생성자는 뷰 라이브러리를 로딩하고나면 접근이 가능하다.

3. 생성자를 사용하는 이유

=>뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의 해놓고 사용자가 그 기능을 재정의하여 편리하게 사용 할 수 있도록 하기 위해서 사용.

＊생성자? 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장 해놓고 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 

기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법.

＊뷰 인스턴스 옵션 속성

-인스턴스를 생성할 때 재정의 할 data, el, template등의 속성을 의미

<div id="#app">                             new Vue({                   

{{message}}                                                el:'#app',

</div>                                                })

＊el: 뷰로 만든 화면이 그려지는 시작점을 의미

＊Vue에서 미리 정의 되어 있는 속성

속성	설명
template	-화면에 표시할 HTML,CSS 마크업 요소를 정의하는 속성  -뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음.

method	-화면 로직 제어와 관계된 메서드를 정의하는 속성,  -마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가 할 수 있다.
created	-뷰의 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성,  -뷰 인스턴스 라이프 사이클 부분과 관련

＊Vue 인스턴스의 유효범위

-뷰 인스턴스를 생성할 경우 HTML의 특정 범위안에서만 옵션 속성들이 적용되어 나타남 이를 인스턴스의 유효범위라고 말한다.

-인스턴의스의 유효범위는 el속성과 밀접한 관계가 있다.

＊Vue 인스턴스 속성을 적용하는 과정

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

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

     3. 특정 화면 요소에 인스턴스를 붙임

     4. 인스턴스 내용이 화면 요소로 변환

     5. 변환된 화면 요소를 사용자가 최종확인

＊Vue 인스턴스 라이프 사이클

-라이프 사이클: 인스턴스의 상태에 따라 호출할 수 있는 속성을 라이프 사이클 이라고 한다.

＊Vue 라이프 사이클 속성(인스턴스의 생성,변경, 소멸과 관련되어 8개가 있다.)

＊인스턴스 생성

＊beforeCreate: 이벤트 및 라이프 사이클 초기화

＊created: 화면에 반응성 주입

＊beforeMount: el, template 속성 확인

＊mount:$el 생성 후 el속성 값을 대입

＊인스턴스 화면에 부착

------------------------------------

＊beforeUpdate:인스턴스의 데이터변경

＊update:화면 재 렌더링 및 데이터 갱신

------------------------------------

->위의 점선구간은 데이터가 변경되는 경우에만 거침

＊인스턴스 내용갱신

＊beforeDestory:인스턴스 접근가능

＊destoryed:컴포넌트, 인스턴스, 디렉티브 등 모두 해제

＊뷰 인스턴스 소멸

＊라이프 사이클의 4단계 구분

인스턴스 생성->생성된 인스턴스 화면에 부착->화면에 부착된 인스턴스의 내용 갱신->인스턴스가 제거되는 소멸

＊beforeCreate

인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 

data 속성과 methods 속성이 아직 인스턴스에 정의 되어 있지 않고 돔과 같은 화면 요소에 접근 불가

＊created

beforeCreate 라이프 사이클 단계 다음에 실행되는 단계

data 속성과 methods 속성이 정의 되어 있으므로, this.data or this.fetchData()와 같은 로직들을 이용하여 

data속성과 methods속성에 정의 된 값에 접근하여 로직 실행 가능

인스턴스가 화면에 요소에 부착되기 전 단계이므로 template 속성에 정의돈 돔 요소로 접근 불가

＊beforeMount

created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 

el 속성에 지정한 화면 요소에 인스턴스를  부착하기 전에 호출되는 단계

render() 함수가 호출되기 직전의 로직을 추가하기 좋습니다.

render()함수는 자바크스립트로 화면의 돔을 그리는 함수.

＊mounted

el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출 되는 단계 

template 속성에 정의한 화면 요소에 접근 할 수 있어서 화면 요소를 제어하는 로직을 수행하기 좋은단계

다만, 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위컴포넌트나 외부라이브러리에 의해 

추가 된 화면 요소들이 최종 HTML코드로 변환되는 시점과 다를 수 있다.

변환되는 시점이 다를경우: $next Tick() API를 활용하여 HTML 코드로 최종 파싱 될 때까지 기다린 후 돔 제어 로직을 추가합니다.

＊인스턴스 화면에 부착

------------------------------------

＊beforeUpdate

el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다.

치환된 값은 뷰의 반응성을 제공하기위해 $watch속성으로 감시한다.

이를 데이터 관찰이라고 한다.

또한 beforeUpdate는 관찰하고 잇는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이며,

변경 예정인 새 데이터에 접근 할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수있다.

하지만 여기에 로직을 넣더라도 화면에서는  다시 그려지지 않는다.(참고)

＊updated

데이터가 변경되고나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계 

데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로 데이터 변경 후 화면 요소에 제어와 관련된 로직을 추가하기 좋은 단계

이 단계에서는 데이터를 변경하게되면 무한 루프에 빠질 가능성이 있다. 따라서 변경 할 경우에는 computed,watch와 같은 속성을 사용해야한다.

따라서 가급적이면 데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가, Updated에서는 변경되는 데이터의 화면 요소와 관련된 로직을 추가하는 것이 좋다.

------------------------------------

->위의 점선구간은 데이터가 변경되는 경우에만 거침

＊인스턴스 내용갱신

＊beforeDestory

뷰 인스턴스가 파괴되기 직전에 호출되는 단계

인스턴스에 접근 가능

뷰 인스턴스의 데이터를 삭제하기 좋은 단계

＊destoryed

뷰 인스턴스가 파괴되고 나서 호출되는 단계

뷰 인스턴스에 정의 된 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴

-

＊뷰 인스턴스 소멸