Vue.js는 데이터의 변화를 자동으로 감지하고 UI를 업데이트할 수 있어, 웹 개발의 복잡성을 크게 줄일 수 있는 직관적이고 강력한 프레임워크이다.
라이프 사이클
컴포넌트나 인스턴스가 생성되고 업데이트되며 소멸되는 전체 과정을 말합니다.
각 단계에서 특정 작업을 수행하기 위해 라이프사이클 훅을 사용할 수 있습니다. 예를 들어, 컴포넌트가 DOM의 데이터가 변경 되었을 때 컴포넌트가 소멸되기 직전 등의 시점에 사용자가 정의한 로직을 실행할 수 있습니다.
라이프사이클 훅은 컴포넌트나 인스턴스의 생명주기 동안 특정 시점에 자동으로 호출되는 함수나 메서드를 의미합니다.
beforeCreate
이름대로 Vue.js에서 인스턴스가 초기화되기 직전에 호출됩니다.
따라서, data와 methods에 접근할 수 없습니다.
created
인스턴스 초기화 후 computed, methods, watch 등의 옵션이 활성화 됐을 때 호출됩니다. 여기서 API 호출이나 초기 데이터 설정 등을 할 수 있습니다.
아직 컴포넌트가 DOM에 마운트 되지 않았기 때문에, $el 속성을 사용할 수 없습니다.
beforeMount
컴포넌트가 마운트되기 직전에 호출됩니다. 이 시점에서 template이랑 render 함수가 컴파일된 상태이지만, DOM에 미적용된 상태입니다.
mounted
컴포넌트가 DOM에 마운트되고 접근 가능한 상태가 되면 호출됩니다.
$el, data, computed, methods, watch 등에 접근 가능합니다.
beforeUpdate
데이터가 변경되어 DOM에 적용되기 전에 호출됩니다. 변경된 데이터에 대해 적용되기 전에 추가적인 상태 변경이나 이벤트를 발생시킬 수 있습니다.
updated
데이터 변경으로 인한 DOM의 재렌더링이 완료된 후에 호출됩니다.
사용할 때는 무한 루프에 빠지지 않도록 상태 변경을 주의해야 합니다.
beforeDestroy
인스턴스가 소멸되기 전에 호출됩니다.
인스턴스가 아직 완전히 파괴되지 않았기 때문에, 이벤트 리스너 제거하는 데 사용할 수 있습니다.
destroyed
이 시점에서는 Vue 인스턴스의 모든 디렉티브가 언바인딩되고, 모든 이벤트 리스너가 제거되며, 모든 자식 인스턴스도 소멸됩니다.