Vue - 라이프사이클

2023. 11. 24. 15:07· 📗 Vue.js
목차
  1. 라이프사이클 훅
  2. 라이프사이클 다이어그램

라이프사이클 훅

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 한다. 이 과정에서 라이프사이클 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 한다


라이프사이클 다이어그램

  • beforeCreate : Vue 애플리케이션이 만들어지기 전에 실행되는 라이프사이클
  • created : Vue 애플리케이션이 만들어진 직후 실행되는 라이프사이클
  • beforeMount : Vue 애플리케이션이 HTML 구조와 연결되기 직전의 라이프사이클
  • mounted : Vue 애플리케이션이 HTML 구조(DOM)와 연결된 직후의 라이프사이클
  • beforeUpdate : 데이터를 수정하고 화면이 업데이트되기 직전에 실행되는 라이프사이클
  • updated : 데이터를 수정하고 화면이 업데이트가 된 후 실행되는 라이프사이클
  • beforeUnmount : Vue 애플리케이션이 HTML 구조(DOM)와 연결이 해제되기 직전의 라이프사이클
  • unmounted : Vue 애플리케이션이 HTML 구조(DOM)와 연결이 해제된 이후의 라이프사이클

 

참고 : https://ko.vuejs.org/guide/essentials/lifecycle.html

'📗 Vue.js' 카테고리의 다른 글

Vue - 이벤트 핸들링  (0) 2023.11.29
Vue - 렌더링  (0) 2023.11.28
Vue - Computed, Watch  (0) 2023.11.27
Vue - 템플릿 문법  (0) 2023.11.24
  1. 라이프사이클 훅
  2. 라이프사이클 다이어그램
'📗 Vue.js' 카테고리의 다른 글
  • Vue - 이벤트 핸들링
  • Vue - 렌더링
  • Vue - Computed, Watch
  • Vue - 템플릿 문법
zunwon
zunwon
zunwon
준원의 개발일지
zunwon
전체
오늘
어제
  • 분류 전체보기
    • 📒 JavaScript
    • 📘 TypeScript
    • React.js
    • 📗 Vue.js
    • 💻 알고리즘
      • 프로그래머스
      • 백준
    • ✏ 회고
      • 후기
    • 👨‍💻 TIL
    • 📋 오픈소스
    • 기타

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 프로그래머스
  • fontend
  • 부스트캠프
  • 국비지원교육
  • Vue.js
  • frontend
  • 함수형자바스크립트
  • 프로젝트캠프
  • TypeScript
  • 회고
  • 스나이퍼팩토리
  • 코딩부트캠프
  • 미래내일일경험
  • 데브코스
  • udemy
  • 알고리즘
  • mil
  • til
  • githru
  • 프로그래머스 데브코스
  • 인사이드아웃
  • 자료구조
  • vercel
  • next.js
  • css
  • 프론트엔드
  • Vue
  • JavaScript
  • 오픈소스컨트리뷰션
  • 함수형 자바스크립트

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.1
zunwon
Vue - 라이프사이클
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.