[17] Vue의 라이프사이클을 어디다 쓰냐면
컴포넌트를 등장하고 나서 2초후에 사라지게
어플리케이션 & 컴포넌트 인스턴스 | Vue.js
어플리케이션 & 컴포넌트 인스턴스 어플리케이션 인스턴스 생성하기 모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작합니다 : const app = Vue.create
v3.ko.vuejs.org
컴포넌트는
웹페이지에 표시되기까지
과정을 거치게 된다.
| lifecycle hooks | 설명 | |
| beforeCreate() | 훅을 넣자!!! 라이프사이클 훅!!!!!! | |
| created() | create 단계 | 데이터만 존재하는 단계 |
| beforeMount() | 훅을 넣자!!! 라이프사이클 훅!!!!!! | |
| mounted() | mount 단계 | 컴포넌트 안에 있는 걸 진짜 html에 로 바꿈 |
| 훅을 넣자!!! 라이프사이클 훅!!!!!! | ||
| 컴포넌트 생성 | index.html 에 장착함 | |
| beforeUpdate() | 훅을 넣자!!! 라이프사이클 훅!!!!!! | |
| updated() | update 단계 | html이 실시간 재랜더링 됨 |
| beforeUnmount() | 훅을 넣자!!! 라이프사이클 훅!!!!!! | |
| unmounted() | Un mount 단계 | 컴포넌트가 사라진다 |
| 자바스크립트 | vue |
| setTimeout(function(){ 실행할 코드 }, 2000); |
mounted() {
setTimeout(() => {
this.showDiscount = false;
}, 2000);
},
|
'코딩애플 > 코딩애플-vue.js' 카테고리의 다른 글
| [part2-5] Nested routes & push 함수 (0) | 2022.01.10 |
|---|---|
| [16] sort 함수 (0) | 2022.01.04 |
| [15] vue 애니메이션 (0) | 2022.01.04 |
| [14] watcher (0) | 2022.01.03 |
| [13] v-model (0) | 2022.01.03 |
