vue0.(vue/라이프사이클)

VUE 

▶SPA : Single Page Application

▶화면 전환이 부드러움 / 새로고침없이 모바일 앱같은 느낌

▶vue 의 경우 html 렌더링이 더 빠름 ! (than React)

 

---

라이프사이클

: 인스턴스나 컴포넌트가 생성된 후 보여지고, 사라지기까지의 단계

: 페이지를 구성하는 과정

 

 

Vue

1. create(생성: 데이터만 존재)

-> 2. mount(template→DOM에 부착)

-> 3.update(업데이트: data변화시 rerendering)

-> 4.destroy(제거)

 

Hook

:  beforeCreate(), created(), beforeMount(), mounted(), beforeUpdate(), updated(), beforeUnmount(), unmounted()

 

1. beforeCreate : vue 인스턴스가 초기화 된 직후에 발생 / 컴포넌트가 DOM에 추가되기 전
2. created : data를 반응형으로 추적 가능 / computed, methods, watch 접근 가능 / but, DOM ㄴㄴ → data세팅, 이벤트리스너 선언 최적 상태
3. beforeMount : DOM 부착 직전 / 가상DOM ㅇ, 실제DOM ㄴ
4. mounted : 제일 많이 사용 / 실제 DOM에 부착되고 난 이후 실행 → this.$el, data, computed, methods, watch 모든 요소에 접근 가능
5. updated : 가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출 / 직접 데이터를 바꾸면 ㄴㄴ
6. beforeDestroy : 인스턴스가 해체되기 직전에 호출 / 모든 속성에 접근이 가능
7. destroyed : 인스턴스가 해체되고 난 직후 / 하위 인스턴스 삭제됨

 

 

 

 

참고 : 

https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4

Vue.js 2.0 라이프사이클 이해하기

 

 

https://kr.vuejs.org/v2/guide/instance.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%ED%9B%85