[Vue.js] created와 mounted의 차이를 알아보자

2023. 6. 23. 12:25·Vue.js
목차
  1. 개념
  2. 화면 출력
  3. 부모에서 created 훅 안에서 값을 변경하는 것이 아닌 mounted에서 변경해야 한다.
  4. 🔗 참고
728x90
반응형

이게 이해가 안되서 라이프 사이클과 여러가지 속성을 공부했다.

개념

created 인스턴스가 작성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다. 그러나 마운트가 시작되지 않았으므로 $el 속성을 아직 사용할 수 없습니다.

mounted el이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출됩니다. 루트 인스턴스가 문서 내의 엘리먼트에 마운트 되어 있으면, mounted가 호출 될 때 vm.$el도 문서 안에 있게 됩니다.

→ 공식문서에 의하면 el사용여부로 둘을 분류할 수 있다.

화면 출력

부모에서 created 훅 안에서 값을 변경하는 것이 아닌 mounted에서 변경해야 한다.

created는 data와 events가 활성화되어 접근할 수 있지만 템플릿과 가상돔은 마운트 및 렌더링되지 않은 상태이기 때문에 created가 실행되는 시점에 dom에 출력하지 않는다.

처음에 초기화된 number값은 자식에 전달되고, 그 값을 통해 자식은 가지고 있다. 그리고 부모에서 mounted 훅이 일어나 값을 변경하기 때문에, 자식은 값이 변했다는 것을 인지하고 watch를 발생한다.

💡 데이터 초기화 선언은 created가, 돔 조작(데이터 변형)은 mounted가 담당한다.

 

🔗 참고

https://mygumi.tistory.com/201

https://velog.io/@leeyw2709/Vue-라이프사이클-훅-created-mounted-차이

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)
  1. 개념
  2. 화면 출력
  3. 부모에서 created 훅 안에서 값을 변경하는 것이 아닌 mounted에서 변경해야 한다.
  4. 🔗 참고
'Vue.js' 카테고리의 다른 글
  • [Vue.js] vue와 express 연결하기
  • [Vue.js] Day.js 모듈로 날짜와 시간 구현하기
  • [Vue.js] watch의 쓰임에 대해서
  • [Vue.js] computed의 동작이란?
Uheeking
Uheeking
안녕하세요. react, flutter, node.js에 관련해서 글을 쓰는 블로그입니다.
Uheeking
Uheeking의 it로그
Uheeking
전체
오늘
어제

공지사항

  • 분류 전체보기 (254)
    • React (48)
    • Node.js (32)
    • Next.js (22)
    • Vue.js (15)
    • javascript (3)
    • Django (19)
    • etc (23)
    • Flutter (30)
    • Error (16)
    • AWS (11)
    • docker & Kubernetes (32)
    • git (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
250x250

인기 글

태그

  • 넥스트
  • 티스토리챌린지
  • docker
  • sequelize
  • next.js
  • Create
  • 도커
  • 플러터
  • flutter
  • 오블완
  • 노드
  • supabase
  • AWS
  • node.js
  • error
  • 리액트
  • Express
  • 쿠버네티스
  • Kubernetes
  • useEffect
  • MySQL
  • React
  • firebase
  • Django
  • NEXT
  • mosquitto
  • Vue.js
  • SSR
  • 장고
  • Props

최근 댓글

최근 글

250x250
hELLO· Designed By정상우.v4.5.2
Uheeking
[Vue.js] created와 mounted의 차이를 알아보자

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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