Vue3 - LifeCycle

📌 목차

• Introduction
• Life cycle in vue
• Hook inside setup
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 Vue3에 새로운 life cycle에 대해서 알아보려고 합니다. 해당 코드는 여기서 확인할 수 있습니다.

📌 Hook inside setup

먼저 새롭게 바뀐 것들에 대해서 Vue3 공식 문서에 자세하게 나와있습니다.

네 이제 beforeCreated나 created는 굳이 선언을 할필요가 없어 졌습니다.

import { onMounted, nextTick, onUpdated } from 'vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup() {
    console.log('before created');
    console.log('created');
    nextTick(() => {
      console.log('nextTick');
    });
    onMounted(() => {
      console.log('onMounted');
    });
    onUpdated(() => {
      console.log('update');
    });

    // RESULT:
    // before created
    // created
    // onMounted
    // nextTick
  }
};

📌 Conclusion

새로운 life-cycle-api에 대해서 알아보았습니다. 이렇게 많은 기능들이 쪼개져서 재사용성이 정말 많이 증가할 것 같습니다. 그럼 다음 포스팅에서 만나요~~ 🎉

📌 Reference

• Vue3 공식문서