Vue 인 스 턴 스 수명 주기 기반(전면 분석)

앞 말
Vue 인 스 턴 스 는 생 성 할 때 데이터 관찰,템 플 릿 컴 파일,데이터 바 인 딩 생 성 등 일련의 초기 화 절차 가 있 습 니 다.이 과정 에서 우 리 는 정 의 된 생명주기 갈고리 함 수 를 통 해 업무 논 리 를 실행 할 수 있다.본 고 는 Vue 실례 의 생명주기 를 상세 하 게 소개 할 것 이다
도시
다음 그림 은 Vue 인 스 턴 스 수명 주기 그림 입 니 다.

해명 하 다.
다음은 제 공 된 생명주기 갈고리 에 따라 Vue 실례 의 각 단계 의 상황 을 상세 하 게 설명 한다
【beforeCreate】
인 스 턴 스 초기 화 를 시작 할 때 동기 화 호출 합 니 다.이때 데이터 관측,사건 등 은 아직 초기 화 되 지 않 았 다.
【created】
인 스 턴 스 생 성 후 호출 합 니 다.이 때 데이터 관측,이벤트 방법 이 완료 되 었 으 나 DOM 컴 파일 이 시작 되 지 않 았 습 니 다.즉,document 에 마 운 트 되 지 않 았 습 니 다.
【beforeMount】
mounted 전에 실행
【mounted】
컴 파일 이 끝 날 때 호출 합 니 다.이 때 모든 명령 이 적용 되 었 습 니 다.데이터 변 화 는 DOM 업 데 이 트 를 실행 할 수 있 지만$el 이 문서 에 삽입 되 었 다 는 보장 은 없습니다.
【beforeUpdate】
인 스 턴 스 마 운 트 후 인 스 턴 스 를 다시 업데이트 할 때 이 방법 을 사용 합 니 다.이 때 DOM 구 조 를 업데이트 하지 않 았 습 니 다.
【updated】
인 스 턴 스 마 운 트 후 인 스 턴 스 를 다시 업데이트 하고 DOM 구 조 를 업데이트 한 후 호출 합 니 다.
【beforeDestroy】
인 스 턴 스 를 없 애기 시작 할 때 호출 합 니 다.현재 인 스 턴 스 는 유효 합 니 다.
【destroyed】
실례 가 소 멸 된 후에 호출 하 다.이 때 모든 바 인 딩 과 인 스 턴 스 명령 이 해제 되 었 고 하위 인 스 턴 스 도 소각 되 었 습 니 다.
【activated】
동적 구성 요소 keep-live 속성 에 맞 춰 사용 해 야 합 니 다.동적 구성 요소 가 렌 더 링 을 초기 화 하 는 과정 에서 이 방법 을 호출 합 니 다.
【deactivated】
동적 구성 요소 keep-live 속성 에 맞 춰 사용 해 야 합 니 다.동적 구성 요소 초기 화 이동 과정 에서 이 방법 을 호출 합 니 다.
단순 실례
다음은 Vue 인 스 턴 스 내부 의 운영 체 제 를 더욱 명확 하 게 이해 하기 위해 간단 한 인 스 턴 스 를 쓰 겠 습 니 다.

<div id="example">{{message}}</div>

<script>
var vm = new Vue({
 el: '#example',
 data:{
 message:'match'
 },
 beforeCreate(){
 console.log('beforeCreate');
 },
 created(){
 console.log('created');
 },
 beforeMount(){
 console.log('beforeMount');
 },
 mounted(){
 console.log('mounted');
 },
 beforeUpdate(){
 console.log('beforeUpdate');
 },
 updated(){
 console.log('updated');
 //       $destroyed  ，    
 this.$destroy(); 
 },
 beforeDestroy(){
 console.log('beforeDestroy');
 },
 destroyed(){
 console.log('destroyed');
 },
})
</script>

이 편 은 Vue 인 스 턴 스 라 이 프 사이클(전면 해석)을 바탕 으로 여러분 에 게 공 유 된 모든 내용 입 니 다.참고 하 시고 많은 응원 부 탁 드 리 겠 습 니 다.