created와 mounted의 차이점

Vue.js를 개발하다 보면, created와 mounted를 사용하는 경우가 있을 겁니다.이 둘은 Vue 컴포넌트 생명주기의 특정 단계에서 호출되는 훅인데요. 적절한 상황에 이 훅들을 사용할 수 있도록 created와 mounted의 차이점에 대해 알아봅시다. 1. createdcreated 훅은 Vue 컴포넌트가 생성된 직후에 호출됩니다.이는 컴포넌트의 데이터 옵션(data, computed, methods 등)가 초기화 된 상태에요.또한, DOM이 아직 준비되지 않은 상태에서 실행하기 때문에 아직 DOM에 접근할 수 없습니다.그렇기에 created 훅은 화면 렌더링과 관계없는 로직에 사용해야 해요. created는 Vue 컴포넌트가 생성되면 먼저 data, props, methods, compute..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 18.
• textsms

Vue.js의 생명주기(Lifecycle)

Vue.js의 생명주기에 대해 자세히 알아봅시다!  1. Vue.js의 생명주기(Lifecycle)Vue.js의 생명주기는 컴포넌트가 생성되고 소멸될 때까지 발생하는 일련의 단계를 의미해요.Vue 컴포넌트는 각 단계마다 특정한 생명주기 훅(Lifecycle hook)을 호출할 수 있으며, 이를 통해 특정 단계에서 로직을 실행하거나 상태를 관리할 수 있어요.  2. Vue.js 생명주기 단계생명주기 단계는 다음 그림과 같이 순서대로 나뉘어 있습니다. 그러면 한 단계씩 알아봅시다. 2-1. beforeCreate (생성 전)beforeCreate는 Vue 인스턴스가 초기화되기 전 상태입니다.아직 데이터 or 메서드 등이 정의되지 않았기 때문에, 이 단계에서 Vue 인스턴스에 접근할 수 없어요.즉, 컴포넌트의..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 10. 16.
• textsms