Vue 08 Lifecycle Hook
Lifecycle
Vue 인스턴스는 생성될 때 사전에 정의된 일련의 초기화 단계를 거치게 되는데 이를 라이프사이클 이라고 한다.
Vue 인스턴스는 생성될 때 사전에 정의된 일련의 초기화 단계를 거치게 되는데 이를 라이프사이클 이라고 한다.
Vue 인스턴스는 크게 생성되고(create), DOM에 부착되고(mount), 업데이트되며(update), 없어지는(destroy) 4가지 과정을 거친다.
🔵 Lifecycle Hook
각각의 단계에서 Vue는, Vue를 사용하는 사람들이 정의한 로직을 실행하도록 == [훅(Hook)을 할 수 있도록] API를 제공한다. 이를 라이프사이클 훅 이라고 한다.
일반적으로 많이 사용하는 종류로는 created
, Mounted
, beforeUpdate
, Updated
, beforDestroy
가 있다.
created
- 반응형이 가능해지는 시점
- data/events에 접근 가능 (computed,methods,watch가 활성화되어 접근 가능)
- DOM에 접근 불가능
- API요청을 통해 Data에 초기값을 설정할 때, 이벤트 리스너 선언할 때 주로 사용 ⭐
var app = new Vue({
el: '#app',
data() {
return {
msg: 'hello';
}
},
created(function() {
console.log(this.msg); // hello
})
})
mounted
- 실제 DOM에 접근이 가능해지는 시점
- computed,methods,watch 뿐만 아니라
this.$el
에도 접근 가능! - API요청을 통해 data에 초기값 설정 + DOM 접근이 필요할 때 주로 사용 ⭐
일반적으로 부모와 자식 컴포넌트 간의 mounted 훅 순서는 위와 같다. 그러나 자식 컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우처럼, 부모의 mounted훅이 모든 자식 컴포넌트가 마운트 된 상태를 보장하지는 않는다. 이때this.$nextTick
을 이용하면 모든 렌더링을 보장할 수 있다.
var app = new Vue({
el: '#app',
mounted(function() {
this.$nextTick(function() {
// 모든 화면이 렌더링된 후 실행합니다.
})
})
})
beforeUpdate
- data 값이 변해서 DOM에도 그 변화를 적용시켜야 할 때, 직전에 호출되는 것
- 디버깅용으로 자주 사용
var app = new Vue({
el: '#app',
beforeUpdate(function() {
console.log('beforeUpdate');
})
})
updated
- 렌더링 하고 실제 DOM이 변경된 이후에 호출되는 훅
- 디버깅용으로 자주 사용
var app = new Vue({
el: '#app',
updated(function() {
console.log('beforeUpdate');
})
})
beforeDestroy
- 데이터,이벤트,DOM 등 모든 것이 아직 살아있는 시점
- 더 효율적인 메모리 관리를 위해 이벤트를 제거할 때 활용 가능
var app = new Vue({
el: '#app',
beforeDestroy(function() {
console.log('beforeDestroy');
})
})
Author And Source
이 문제에 관하여(Vue 08 Lifecycle Hook), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hsngju/Vue-08-Lifecycle-Hook저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)