[vue2] 뷰 라이프 사이클 다이어그램

beforeCreate

• 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계
• data, methods 속성은 아직 정의 되지 않고 돔과 같은 화면 요소에도 접근 불가

created

• beforeCreate 라이프 사이클 단계 다음에 실행되는 단계
• data 속성과 methods 속성이 정의되어있어 this. data 또는 this. fetchData()와 같은 로직을 이용해 data 속성과 methods 속성에 정의된 값에 접근해 로직을 실행할 수 있음
• 아직 인스턴스가 화면요소에 부착되지 전이므로 template 속성에 정의된 돔 요소로 접근 불가
• data 속성과 methods 속성에 접근하기 가장 좋아 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음

beforeMount

• created 단계 이후 template 속성에 지정한 마크업 속성을 render()함수로 변환 후 el 속성에 지정한 돔에 인스턴스를 부착하기 전에 호출하는 단계

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

mounted

• el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 돔에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계

• 다만 ! 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html 코드로 변환되는 시점과 다를 수도 있음

  cf ) 반환되는 시점이 다른경우 $nextTick() API 를 활용해 HTML 코드로 최종 파싱 될 때까지 기다린 후 돔 제어 로직을 추가

beforeUpdate

• el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됨
• 치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시
• 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
• 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음

updated

• 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
• 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점으로, 데이터 변경 후 화면 요소제어와 관련된 로직을 추가하기 좋음
• 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질수 있어 값 변경시 computed, watch 와 같은 속성을 사용해야함
• 데이터 값을 갱신하는 로직 ⇒ beforeUpdate
• 변경 데이터의 화면 요소와 관련된 로직 ⇒ updated

beforeDestory

• 뷰 인스턴스가 파괴되기 직전에 호출되는 단계
• 아직 인스턴스에 접근이 가능해 뷰 인스턴스의 데이터를 삭제하기 좋음

destoryed

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

watch, create에는 화살표 함수를 사용하는 것을 지양
왜? 화살표 함수들은 부모 컨텍스트에 바인딩 되기에 this컨텍스트가 호출하는 vue인스턴스에 사용할 경우 'Uncatch TypeError: ' 가 날 수도 있음

부모 자식 간의 컴포넌트 마운트 순서

이벤트 버스 사용 시 $on 을 못하는 이유

수동 mounting 추천 하지 않음

• 뷰 컴포넌트 대신에 수동으로 자식 컴포넌트를 마운트 하는 경우 발생
• dialog 훅을 beforeDestory 대신 destoryed 훅에 놓아 수동으로 꺼줘야함