vue.js lifecycle

인스턴스 생성 > 인스턴스 화면에 부착 > 화면에 부착된 인스턴스 내용 갱신 > 인스턴스 제거되는 소멸
created => mounted => updated
부착->갱신 구간은 데이터 변경되는 경우에만 거침

beforeCreate

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

created

• beforeCreate 라이프 사이클 단계 다음에 실행되는 단계
• data/methods 속성이 인스턴스에 정의 O
• this.data, this.fetchDate() 같은 로직들 이용해서 data 속성과 methods 속성에 정의된 값에 접근해 로직을 실행할 수 있음
• template 속성에 정의된 돔과 같은 화면 요소에는 접근할 수 X
• 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 데이터를 요청해 받아오는 로직을 수행하기 좋음

beforeMount

• created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계
• render() 함수 호출되기 직전의 로직 추가하기 좋음
• render() 함수 : 자바스크립트로 화면의 돔을 그리는 함수

mounted

• el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계
• template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋음
• BUT, 돔에 인스턴스가 부착되자마자 바로 호출되므로 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있음 => 변환되는 시점이 다를 경우 $nextTick() API 사용해서 HTML 코드로 최종파싱(변환)될 때까지 기다린 후 돔 제어 로직 추가

beforeUpdate

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

updated

• 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
• 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점
• 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계
• 이 단계에서 데이터값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed,watch 와 같은 속성 사용해야함
• mounted 와 동일하게 $nextTick() 사용해서 변환 완료될때까지 기다렸다가 로직 추가 가능

데이터값을 갱신하는 로직은 가급적이면 beforeUpdate
변경 데이터의 화면 요소(돔)와 관련된 로직을 추가하는 건 가급적이면 updated

beforeDestroy

• 뷰 인스턴스 파괴되기 직전에 호출되는 단계
• 아직 인스턴스에 접근할 수 있는 단계
• 뷰 인스턴스 데이터 삭제하기 좋은 단계

destroyed

• 뷰 인스턴스가 파괴되고 나서 호출되는 단계 (모든 속성 제거 + 하위 선언 인스턴스 파괴)

추가 문법

1) computed

• data 속성 값의 변화에 따라 자동으로 다시 연산 (값이 변경되면 자동적으로 수행됨)
• data 속성 값이 변경되면 전체 값 다시 한번 계산
• 캐싱 역할 (값 저장해서 화면 여러곳에 표시해야한다면 여러번 표시 가능)
• 데이터가 변경되지 않는 한 이전의 계산 값을 가지고 있다가(캐싱하고 있다가) 필요할때 바로 반환
• 복잡한 연산을 반복 수행해서 화면에 나타내기 좋음

2) watch

• 데이터 변화를 감지해서 자동으로 특정 로직 수행
• computed 속성은 내장 API 를 활용한 간단한 연산 정도인 반면 watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리

3) methods

• 호출할때만 해당 로직이 수행