vue 라 이 프 사이클 인 스 턴 스 소결

본 논문 의 사례 는 vue 생명 주 기 를 분석 했다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
모든 Vue 인 스 턴 스 는 완전한 수명 주기 가 존재 합 니 다.데이터 생 성,초기 화,템 플 릿 컴 파일,Dom 마 운 트,렌 더 링→업데이트→렌 더 링,소각 등 일련의 과정 을 거 칩 니 다.아래 그림 과 같다.

갈고리 함수
vue 의 전체 생명 주 기 는 세 단계 로 나 눌 수 있 습 니 다.초기 화 단계,운영 단계 와 소각 단계 입 니 다.모두 많은 갈고리 함수 가 존재 합 니 다.그들 은 vue 수명 주기 가 다른 단계 에서 조작 을 합 니 다.다음 과 같이 열거 합 니 다.

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

갈고리 함수 설명

beforeCreate

new Vue()를 통 해 vue 인 스 턴 스 를 만 들 면 vue 의 수명 주기 가 시작 되 고 먼저 beforeCreate 갈고리 함 수 를 실행 합 니 다.이 때 vue 인 스 턴 스 는 빈 케이스 일 뿐 DOM 요 소 를 마 운 트 하지 않 았 습 니 다.데이터 와 실제 dom 에 접근 할 수 없고 작업 을 하지 않 습 니 다.

created

이 때 는 이미 데 이 터 를 사용 할 수 있 고 데 이 터 를 변경 할 수 있 습 니 다.여기 서 데 이 터 를 변경 하면 updated 함수 가 발생 하지 않 고 다른 갈고리 함수 가 발생 하지 않 습 니 다.보통 여기 서 초기 데 이 터 를 가 져 올 수 있 습 니 다.

beforeMount

이 함수 에서 가상 dom 이 생 성 되 었 습 니 다(곧 렌 더 링 할 것 입 니 다).여기 서도 데 이 터 를 변경 할 수 있 습 니 다.updated 를 실행 하지 않 습 니 다.렌 더 링 전에 마지막 으로 데 이 터 를 변경 할 수 있 는 기 회 는 다른 갈고리 함수 가 발생 하지 않 습 니 다.

mounted

이 함수 가 호출 되 었 을 때 구성 요 소 는 이미 페이지 에 나 타 났 습 니 다.데이터,실제 dom 은 모두 처리 되 었 습 니 다.사건 은 모두 마 운 트 되 었 습 니 다.여기 서 실제 dom 등 을 조작 할 수 있 습 니 다.

beforeUpdate

구성 요소 나 인 스 턴 스 의 데이터 가 변경 되면 즉시 beforeUpdate 를 실행 하고 vue 의 가상 dom 체 제 는 가상 dom 을 다시 구축 하여 지난번 가상 dom 트 리 와 diff 알고리즘 을 비교 한 후에 다시 렌 더 링 합 니 다.

updated

업데이트 가 완료 되면 updated 를 실행 하고 데이터 가 변경 되 었 으 며 dom 도 다시 render 가 완료 되 었 습 니 다.업 데 이 트 된 가상 dom 을 조작 할 수 있 습 니 다.

beforeDestroy

어떤 방식 으로$destroy방법 을 호출 한 후,즉시 beforeDestroy 함 수 를 실행 하여 타이머 제거,비 명령 으로 연 결 된 이벤트 제거 등 사후 작업 을 합 니 다.

destroyed

구성 요소 의 데이터 바 인 딩,감청 등 을 제거 한 후 dom 빈 케이스 만 남 았 습 니 다.이때 destroyed 를 실행 합 니 다.물론 여기 서 이 같은 조작 도 할 수 있다.
vue 의 생명주기:태 어 날 때 부터 불 러 올 때 까지 완전한 생명주기 과정 이 있다
서로 다른 시기 에 서로 다른 코드 를 써 서 다른 일 을 할 수 있 게 해 주세요.
갈고리 함수:서로 다른 생명주기 vue 가 우리 에 게 드 러 낸 반전 함수 입 니 다.
예시:

var vn = new Vue({
el:'.box',
data:{
msg:'<h1>  </h1>'
},
beforeCreate:function() {
alert("      ,      ");
},
created:function() {
alert('vue    new   ,          ');
},
beforeMount:function() {
alert('vue        ,               ');
},
mounted:function() {
alert('           ');
},
beforeUpdate:function() {
alert('      ,       ');
},
updated:function() {
alert('      ');
},
beforeDestroy:function() {
alert('vue         ');
},
destroyed:function() {
alert("vue          !!!");
}
})

본 고 에서 말 한 것 이 여러분 vue.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.