Vue 라이프사이클 훅 - created, mounted 차이

라이프사이클 다이어그램

주의: 화살표 함수를 사용해서 라이프사이클 메소드를 정의하면 안됩니다.

created

• 인스턴스가 작성된 후 동기적으로 호출됩니다.
• 부모, 자식 관계의 컴포넌트가 렌더링 될 때 mounted보다 먼저 호출되며 부모, 자식 순으로 실행합니다.
• 가상돔을 건드릴 수 없습니다.
  ($el 속성 사용 불가)
• 데이터 초기화 선언을 created에서 많이 합니다.
  • 컴포넌트 초기에 외부에서 부여받은 설정에 의해 기본 값이 변경이 필요한 경우

mounted

• 인스턴스가 마운트된 후 호출됩니다.
• 부모, 자식 관계의 컴포넌트가 렌더링 될 때 created 다음으로 호출되며 자식, 부모순으로 실행합니다.
• 모든 자식 컴포넌트가 마운트되었음을 보장하지 않습니다.
  (전체 화면내용이 렌더링될 때까지 기다리려면, mounted 내에 vm.$nextTick를 사용합니다.)
• 가상돔을 건드릴 수 있습니다.
  ($el 속성 사용 가능)
• 돔조작관련을 mounted 영역에 기술한다.
  • 비동기 호출(async/await, promise) 구문을 통해 API 데이터를 가져오는 경우

// Parent
export default {
  created() {
    console.log("Parent created")
  },
  mounted() {
    console.log("Parent mounted")
  }
}

// Child
export default {
  created() {
    console.log("Child created")
  },
  mounted() {
    console.log("Child mounted")
  }
}

=> Parent created
=> Child created
=> Child mounted
=> Parent mounted

모든 자식 컴포넌트가 마운트 되었음을 보장하지 않습니다

<template>
  <div id="app">
    <div v-if="isApp">
      <div ref="target">hello</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
  	return {
  	  isApp: false,
 	};
   },
  async mounted() {
  	this.isApp = true;
  	console.log(this.$ref["target"]);
  },
};
</script>

nextTick API 사용

<script>
export default {
  ...
  mounted() {
  	this.isApp = true;
    this.$nextTick(() => {
      console.log(this.$ref["target"]);
    });
  },
};
</script>