Vue.js 생명주기

1. created

• Vue Instance 생성 후, 데이터들의 설정이 완료된 후 호출
• Instance가 화면에 부착되기 전 (Vue와 화면 연결 X)
• 서버에 데이터를 요청하여 받아오는 로직을 주로 수행

2. mounted

• 지정된 element에 Vue Instance 데이터가 마운트된 후 호출
• template 속성에 정의한 화면 요소에 접근할 수 있어 주로 화면 요소를 제어하는 로직 수행
• Vue와 화면이 연결된 상태(document, ready)

3. updated

• Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트된 상태
• 데이터 변경 후 화면 요소 제어와 관련된 로직 추가

4. destroyed

• Vue Instance가 제거된 후 호출

<template>
  <div>     
      <h1>{{this.name}}</h1>
      <button @click="updateData()">Add name</button>
  </div>
</template>

<script>
export default {
    props:['address'],   
    data(){
        return{
            name:'jaewon'
        }
    },
    beforeCreate(){
        console.log(this.name); // data 접근 불가 
    },
    created(){
        //서버로 부터 받은 데이터를 data에 설정 
        console.log(this.name);  // data 접근 가능 
    },
    beforeMount(){
        console.log('beforeMount'); 
    },
    mounted(){
      // dom 컨틀로 접근 가능 
      console.log('mounted'); 
    },
    beforeUpdate(){
        // this.name의 값이 변경 되면 호출 
        console.log('beforeUpdate'); 
    },
    updated(){
        // this.name의 값이 변경 되면 호출 
        console.log('updated'); 
    },
    beforeDestroy(){
        console.log('beforeDestroy'); 
    },
    destroyed(){
        //메모리 누스 방지위해 이벤트 리스너 삭제 및 데이터 초기화 등을 한다. 
        //vue 화면이 해제 될때 호출 된다.
        console.log('destroyed'); 
    },
    methods:{
        updateData(){
            this.name+=this.name;
        }
    },
}
</script>