JavaScript/Vue

Vue 라이프사이클 다이어그램 (created, mounted, beforedestroy 후킹메소드)

우롱차 2021. 3. 8. 16:30
728x90

출처 : https://kr.vuejs.org/v2/guide/instance.html#%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8

 

created : 인스턴스가 생성된 다음 바로 호출된다.

뷰 인스턴스는 생성됐지만 태그엔 접근하지 못하고

데이터나 메소드만 사용이 가능하다

(api로 데이터 가져와서 출력해야하는 컴포넌트 같은 경우는

이 created에 api로 데이터를 가져오는 로직을 넣으면 된다고 한다!)

 

mounted : 화면에 그려진 뒤 호출된다.

화면에 출력이 됐기 때문에

태그에 접근할 수 있어서

대부분의 작업이 mounted method안에서 이루어짐.

 

beforeDestroy : 인스턴스가 제거되기 전에 호출된다.

만약 별도로 이벤트리스너를 등록했다면 여기서 제거하면 된다.

 

출처 : youtu.be/gDD72Xgpfgs?t=290

728x90

'JavaScript > Vue' 카테고리의 다른 글

Vue 용 Bootstrap 사용하기  (0) 2021.03.15
vue-router  (0) 2021.03.15
Vue.js란?  (0) 2021.03.15
vue 프로젝트 처음 만들기  (0) 2021.03.15
프런트엔드 개발과 관련된 용어  (0) 2021.03.09