Vue 인 스 턴 스 의 수명 주기 created 와 mounted 의 차이 점 에 대한 상세 한 설명

머리말
본 고 는 주로 Vue 사례 에서 생명주기 created 와 mounted 의 차이 에 관 한 내용 을 소개 하고 참고 학습 을 제공 합 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 해 보 겠 습 니 다.
라 이 프 사이클

무엇이 생명주기 입 니까
Vue 인 스 턴 스 는 완전한 수명 주기 가 있 습 니 다.즉,데 이 터 를 만 들 고 초기 화 하 며 템 플 릿 을 컴 파일 하고 Dom 을 마 운 트 하 며 렌 더 링→업 데 이 트→렌 더 링,마 운 트 해제 등 일련의 과정 이 있 습 니 다.우 리 는 이것 이 Vue 의 수명 주기 라 고 부 릅 니 다.쉽게 말 하면 Vue 인 스 턴 스 가 생 성 에서 소각 까지 의 과정 이 바로 생명 주기 라 는 것 이다.
Vue 의 전체 생명 주기 에서 일련의 사건 을 제공 합 니 다.우 리 는 사건 이 발생 할 때 js 방법 을 등록 할 수 있 습 니 다.우 리 는 자신 이 등록 한 js 방법 으로 전체 국면 을 통제 할 수 있 습 니 다.이런 사건 응답 방법 에서 this 는 vue 의 인 스 턴 스 를 직접 가리 키 고 있 습 니 다.
위의 그림 에서 생명 주기 도 에 대한 표시
특히 주의해 야 할 것 은 created 갈고리 함수 와 mounted 갈고리 함수 의 차이 이다.

모든 갈고리 함 수 는 언제 촉발 합 니까?
beforeCreate
인 스 턴 스 가 초기 화 되면 데이터 관측(data observer)과 이벤트/watcher 이벤트 설정 이 호출 됩 니 다.
created
인 스 턴 스 가 생 성 된 후 호출 되 었 습 니 다.이 단계 에서 인 스 턴 스 는 다음 과 같은 설정 을 완 료 했 습 니 다.데이터 관측(data observer),속성 과 방법의 연산,watch/event 이벤트 반전.그러나 마 운 트 단계 가 시작 되 지 않 았 습 니 다.$el 속성 은 현재 보이 지 않 습 니 다.
beforeMount
마 운 트 시작 전에 호출 됨:관련 render 함수 가 처음으로 호출 되 었 습 니 다.
mounted
엘 은 새로 만 든 vm.$el 로 바 뀌 었 고 인 스 턴 스 에 마 운 트 한 후 이 갈 고 리 를 호출 합 니 다.
beforeUpdate
데이터 업데이트 시 호출 은 가상 DOM 이 다시 렌 더 링 하고 패 치 하기 전에 발생 합 니 다.이 갈고리 에서 상 태 를 더 바 꿀 수 있 습 니 다.이것 은 추가 적 인 렌 더 링 과정 을 촉발 하지 않 습 니 다.
updated
데이터 변경 으로 인 한 가상 DOM 이 다시 렌 더 링 하고 패 치 를 한 다음 에 이 갈 고 리 를 호출 합 니 다.
이 갈고리 가 호출 되 었 을 때 구성 요소 DOM 이 업데이트 되 었 기 때문에 DOM 에 의존 하 는 작업 을 수행 할 수 있 습 니 다.그러나 대부분의 경우 이 기간 에 상 태 를 바 꾸 는 것 을 피해 야 한다.왜냐하면 이것 은 무한 순환 을 초래 할 수 있 기 때문이다.
이 갈 고 리 는 서버 에서 렌 더 링 하 는 동안 호출 되 지 않 습 니 다.
beforeDestroy
인 스 턴 스 소각 전에 호출 합 니 다.이 단계 에서 실례 는 여전히 완전히 사용 할 수 있다.
destroyed
Vue 실례 소각 후 호출.호출 후 Vue 인 스 턴 스 가 지시 하 는 모든 것 이 바 인 딩 되 고 모든 이벤트 모니터 가 제거 되 며 모든 하위 인 스 턴 스 도 삭 제 됩 니 다.이 갈 고 리 는 서버 에서 렌 더 링 하 는 동안 호출 되 지 않 습 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.