[vue.js]라이프 싸이클 속성

라이프 싸이클 속성: create              -> mount              -> update              -> destory

 beforeCreate-created   beforeMount-mounted   beforeUpdate-updated   beforeDestory-destoryed

1.beforeCreate: 첫 싸이클 시작 단계.

  -.전체 라이프 싸이클 단계의 첫번째임.

  -.template속성을 이용한 DOM과 같은 화면 요소에 접근안됨.       

2.created: 서버와 데이터 요청 및 전송 로직 수행 단계.

  -.data속성과 methods속성이 정의되어 있음. 

  -.template속성을 이용한 DOM과 같은 화면 요소는 아직 접근안됨.

  -.component가 생성되고 나서 실행되는 라이프 싸이클 속성 단계. 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.

3.beforeMount: DOM 변경 전 로직 수행 단계.

  -.template 속성에 지정한 마크업 속성을 render()함수로 변환한 후 el속성에 지정한 DOM에 인스턴스 부착전 호출.

  -.render()함수 호출전 로직을 추가하기에 좋다. render()함수는 자바스크립트로 화면의 DOM을 그리는 함수.

4.monted: 화면제어 로직 처리 단계.

  -.el속성에 지정한 화면 요소에 인스턴스가 부착된 후에 호출되는 단계

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

    다만 DOM에 인스턴스가 부착 되자마자 호출되기에 하위 컴포넌트와 외부 라이브러리에 의해 추가된 화면 요소들이 

    최종 HTML코드로 변환되는 시점과 다를수 있다. 

    그렇기에 변환되는 시점이 다를 경우 $nextTick() API를 사용하여 html 코드로 파싱될 때까지 기다린 후 DOM제어 로직 추가.

5.beforeUpdate: 데이터 변경 감시 -> 화면 변경 전 수행 로직 처리 단계.

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

    치환된 값은 $watch속성으로 감시(데이터 관찰)

  -.관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계.

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

    변경된 값은 아직 화면에 다시 그려지지 않는다.

6.updated: 화면 변경 단계. 무한루프 조심.

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

    즉, 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점

  -.데이터 변경후 화면요소 제어와 관련된 로직 추가. 

    단, 데이터 값의 변경에 따른 무한 루프에 빠질수 있기에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 한다.

  -.데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가, updated에서는 변경 데이터의 화면 요소와 관련된 로직을 

    추가.

    즉, 될수 있으면 직접적인 데이터 변경은 beforeUpdate에서, 변경된 데이터와 관련된 화면 변경은 updated에서 하도록 한다.

  -.변환되는 시점이 다를 경우 $nextTick() API를 사용하여 변환이 완료될때까지 기다렸다가 로직을 추가

7.beforeDestory: 인스턴스에 마지막 접근 가능 단계.

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

  -.아직 인스턴스에 접근은 가능하기에 뷰 인스턴스의 데이터를 삭제하기 좋은 단계.

8.destoryed:

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

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