Vue의 라이프 사이클

https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

 

---

 Create

• 뷰 인스턴스에 data 속성, methods 속성을 정의

1. beforeCreate
   • 뷰 인스턴스가 생성되고 각 정보가 설정되기 전에 호출된다
   • 화면 요소에 접근할 수 없다
2. created
   • 뷰 인스턴스가 생성되고 데이터들의 설정이 완료되면 호출된다
   • 뷰 인스턴스가 화면에 부착되기 전이기 때문에 템플릿 속성에 정의된 화면 요소에 접근 할 수 없다
   • 서버에 데이터를 요청하여 받아오는 Http 통신에 사용된다
   • data 속성, method 속성에 접근할 수 있다

---

Mount

• DOM에 뷰 인스턴스를 부착

1. mounted
   • 지정된 엘리먼트에 뷰 인스턴스 데이터가 마운트 된 후에 호출된다.
   • 템플릿 속성에 정의 된 화면 요소에 접근이 가능해서 화면 요소를 제어하는 로직을 수행한다
   • this.$el을 통해 바인딩된 화면 요소에 접근할 수 있다

---

Update

• DOM과 바인딩 된 데이터가 변경되어 re-render

1. beforeUpdate
   • 바인딩 된 데이터가 변경된 후 화면이 새로 렌더링 되기 전에 호출된다
   • 변경된 데이터에 접근 가능
   • 이 때, 데이터를 변경해도 update가 발생하지 않는다
2. updated
   • 뷰에서 관리하는 데이터가 변경되어 DOM이 업데이트 되면 호출된다
   • 데이터 변경 후 화면 요소의 제어와 관련된 로직을 수행한다

바인딩 된 데이터를 변경할 경우 무한 Update 발생하므로 주의

---

Destroy

• 바인딩 해제 및 뷰 인스턴스 제거

1. beforeDestroy
   • 바인딩 해제 및 뷰 인스턴스 제거 전에 호출된다
   • 뷰 인스턴스에 접근 가능
2. destroyed
   • 모든 바인딩 해제 및 뷰 인스턴스 삭제 후에 호출된다
   • 뷰 인스턴스 접근 불가

---