Vue 생명주기 구별 상세 설명

라 이 프 사이클 분류
vue 모든 구성 요 소 는 독립 적 이 고 모든 구성 요 소 는 수명 주기 가 있 습 니 다.
구성 요소 생 성,데이터 초기 화,마 운 트,업데이트,폐기 등 구성 요소 의 수명 주기 입 니 다.
구성 요소 에서 구체 적 인 방법 은 다음 과 같다.
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
beforeCreate(생 성 전)
인 스 턴 스 초기 화 후 데이터 관측 과 이벤트 설정 이 호출 되 었 습 니 다.이 때 구성 요소 의 옵션 대상 이 만 들 어 지지 않 았 습 니 다.el 과 data 가 초기 화 되 지 않 았 기 때문에 methods 에 접근 할 수 없습니다.
data,computed 등의 방법 과 데이터.
created(생 성 후)
인 스 턴 스 가 생 성 된 후에 호출 되 었 습 니 다.이 단계 에서 인 스 턴 스 는 다음 과 같은 설정 을 완 료 했 습 니 다.데이터 관측,속성 과 방법의 연산,watch/event 이벤트 리 셋,data 데이터 초기 화 를 완 료 했 습 니 다.el 은 없습니다.그러나 단 계 는 아직 시작 되 지 않 았 습 니 다.$el 속성 은 현재 보이 지 않 습 니 다.이것 은 자주 사용 하 는 생명 주기 입 니 다.methods 의 방법 을 호출 하여 data 의 데 이 터 를 바 꿀 수 있 고 vue 의 응답 식 바 인 딩 을 통 해 페이지 에 나타 날 수 있 으 며,coptute d 의 계산 속성 등 을 가 져 올 수 있 기 때 문 입 니 다.보통 우 리 는 여기 서 인 스 턴 스 를 미리 처리 할 수 있 습 니 다.
beforeMount(마 운 트 전)
시작 하기 전에 호출 되 었 습 니 다.관련 render 함수 가 처음으로 호출 되 었 습 니 다(가상 DOM).인 스 턴 스 는 다음 과 같은 설정 을 완 료 했 습 니 다.템 플 릿 을 컴 파일 하고 data 안의 데이터 와 템 플 릿 을 html 로 생 성하 여 el 과 data 초기 화 를 완 료 했 습 니 다.이 때 html 가 페이지 에 걸 리 지 않 았 음 을 주의 하 십시오.
mounted(마 운 트 후)
완료 되 었 습 니 다.즉,템 플 릿 에 있 는 HTML 이 HTML 페이지 에 렌 더 링 되 었 습 니 다.이 때 는 보통 ajax 작업 을 할 수 있 습 니 다.mounted 는 한 번 만 실 행 됩 니 다.
beforeUpdate(업데이트 전)
데이터 가 업데이트 되 기 전에 호출 되 었 습 니 다.가상 DOM 에서 다시 렌 더 링 하고 패 치 하기 전에 이 갈고리 에서 상 태 를 계속 변경 할 수 있 습 니 다.추가 렌 더 링 과정 이 발생 하지 않 습 니 다.
업데이트(업데이트 후)
데이터 변경 으로 인해 가상 DOM 리 렌 더 링 과 패 치 는 호출 만 할 수 있 습 니 다.호출 할 때 구성 요소 DOM 이 업데이트 되 었 기 때문에 DOM 에 의존 하 는 작업 을 수행 할 수 있 습 니 다.그리고 대부분 상황 에서 이 기간 에 상 태 를 변경 하 는 것 을 피해 야 합 니 다.이 고 리 는 서버 에서 렌 더 링 하 는 동안 호출 되 지 않 습 니 다.
beforeDestroy(소각 전)
인 스 턴 스 를 없 애기 전에 호출 합 니 다.인 스 턴 스 는 여전히 완전히 사용 할 수 있 습 니 다.
이 단 계 는 this 로 인 스 턴 스 를 가 져 올 수 있 습 니 다.
일반적으로 이 단계 에서 리 셋 작업 을 합 니 다.예 를 들 어 구성 요소 의 타이머 와 감청 dom 사건 을 제거 합 니 다.
폐기(폐기 후)
인 스 턴 스 가 삭 제 된 후에 호출 되 기 때문에 이벤트 모니터 가 이동 되 고 모든 하위 인 스 턴 스 가 삭 제 됩 니 다.이 갈 고 리 는 서버 에서 렌 더 링 하 는 동안 호출 되 지 않 습 니 다.
vue 인 스 턴 스 는 이벤트 감청 및 dom 의 연결 을 해제 하 였 으 나 dom 구 조 는 여전히 존재 합 니 다.
실행 순서(그림)

Vue 라 이 프 사이클 차이 에 대한 상세 한 설명 은 여기까지 입 니 다.Vue 라 이 프 사이클 에 관 한 더 많은 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!