[Vue.js] 뷰 라이프 사이클 VUE Life Cycle

[Vue.js] 뷰 라이프 사이클 Vue Life Cycle

 

 

뷰를 통한 UI 구현에 있어서

알맞은 타이밍에 서버에서 데이터를

전달 받거나 전달 해주어야 하는데

뷰의 라이프 사이클을 통해 해당 '타이밍'에

데이터를 전달하거나 받을 수 있다

 

⭐️  기본 형태

<script>
	export default {
    	name : 'App',
        //원하는 라이프사이클 작성
        created(){},
        //여러개의 사이클 사용 가능
        mounted(){},
        ...
    }
</script>

 

⭐️  라이프 사이클은 크게

Create - Mount - Update - Unmount로 나뉘는데

 

1️⃣  Create 는 컴포넌트 UI 랜더 이전에

데이터를 구성하는 단계,

 

2️⃣  Mount 는 UI 랜더 단계,

 

3️⃣  Update 는 Vue의 State [Data()]가 바뀔때,

 

4️⃣  Unmount 는 컴포넌트 종료시를 뜻한다.

 

⭐️  뷰에서는 이를 이전 / 이후 단계로

세분화하여 구현이 가능하다.

 

🌈. beforeCreate()

Create 단계 직전에 호출

 

🌈. created()

Create 단계 이후에 호출

 

🌈. beforeMount()

Mount 단계 직전에 호출

 

🌈  mounted()

Mount 단계 이후에 호출

 

🌈. beforeUpdate()

Update 단계 이전에 호출

 

🌈. updated()

Update 단계 이후에 호출

 

🌈. beforeUnmount()

unmount 단계 이전에 호출

 

🌈. unmounted()

unmount 단계 이후에 호출