Vue 부자 구성 요소 수명 주기 실행 순서 및 갈고리 함수 깊이 이해
1.vue 의 생명주기 도
vue 인 스 턴 스 의 전체 생명 주기의 각 단계 에서 서로 다른 갈고리 함 수 를 제공 하여 우리 가 서로 다른 조작 을 할 수 있 도록 합 니 다.vue 홈 페이지 에서 각 갈고리 함수 에 대한 상세 한 해석 을 보 여 줍 니 다.
생명주기 갈고리
생명주기 갈고리
상세 하 다.
beforeCreate
인 스 턴 스 가 초기 화 되면 데이터 관측(data observer)과 이벤트/watcher 이벤트 설정 이 호출 됩 니 다.
created
인 스 턴 스 가 생 성 된 후 호출 되 었 습 니 다.이 단계 에서 인 스 턴 스 는 다음 과 같은 설정 을 완 료 했 습 니 다.데이터 관측(data observer),속성 과 방법의 연산,watch/event 이벤트 반전.그러나 마 운 트 단계 가 시작 되 지 않 았 습 니 다.$el 속성 은 현재 보이 지 않 습 니 다.
beforeMount
마 운 트 시작 전에 호출 됨:관련 render 함수 가 처음으로 호출 되 었 습 니 다.
mounted
엘 은 새로 만 든 vm.$el 로 바 뀌 었 고 인 스 턴 스 에 마 운 트 한 후 이 갈 고 리 를 호출 합 니 다.루트 인 스 턴 스 가 문서 에 있 는 요 소 를 마 운 트 하면 mounted 가 호출 될 때 vm.$el 도 문서 에 있 습 니 다.
beforeUpdate
데이터 업데이트 시 호출 은 가상 DOM 이 다시 렌 더 링 하고 패 치 하기 전에 발생 합 니 다.이 갈고리 에서 상 태 를 더 바 꿀 수 있 습 니 다.이것 은 추가 적 인 렌 더 링 과정 을 촉발 하지 않 습 니 다.
updated
데이터 변경 으로 인 한 가상 DOM 이 다시 렌 더 링 하고 패 치 를 한 다음 에 이 갈 고 리 를 호출 합 니 다.이 갈고리 가 호출 되 었 을 때 구성 요소 DOM 이 업데이트 되 었 기 때문에 DOM 에 의존 하 는 작업 을 수행 할 수 있 습 니 다.
activated
keep-alive 구성 요소 활성화 시 호출.
deactivated
keep-alive 구성 요소 가 정지 되 었 을 때 호출 합 니 다.
beforeDestroy
인 스 턴 스 소각 전에 호출 합 니 다.이 단계 에서 실례 는 여전히 완전히 사용 할 수 있다.
destroyed
Vue 실례 소각 후 호출.호출 후 Vue 인 스 턴 스 가 표시 하 는 모든 것 이 바 인 딩 되 고 모든 이벤트 모니터 가 제거 되 며 모든 하위 인 스 턴 스 도 제 거 됩 니 다.
실례 소각 후 호출.호출 후 Vue 인 스 턴 스 가 지시 하 는 모든 것 이 바 인 딩 되 고 모든 이벤트 모니터 가 제거 되 며 모든 하위 인 스 턴 스 도 삭 제 됩 니 다.
2.실제 조작
다음은 실제 코드 실행 과정 에서 부자 구성 요소 의 생명주기 생 성 과정 과 갈고리 함수 실행의 실시 간 상태 변 화 를 이해 합 니 다.
테스트 는 아래 코드 를 기반 으로 vue.js 파일 을 도입 하면 실 행 됩 니 다.(페이지 를 열 고 새로 고침 을 한 번 더 누 르 면 자동 으로 debugger 상태 로 들 어 갑 니 다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<keep-alive>
<my-components :msg="msg1" v-if="show"></my-components>
</keep-alive>
</div>
</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
var child = {
template: '<div>from child: {{childMsg}}</div>',
props: ['msg'],
data: function() {
return {
childMsg: 'child'
}
},
beforeCreate: function () {
debugger;
},
created: function () {
debugger;
},
beforeMount: function () {
debugger;
},
mounted: function () {
debugger;
},
deactivated: function(){
alert("keepAlive ");
},
activated: function () {
console.log('component activated');
},
beforeDestroy: function () {
console.group('beforeDestroy ===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function () {
console.group('destroyed ===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
};
var vm = new Vue({
el: '#app',
data: {
message: 'father',
msg1: "hello",
show: true
},
beforeCreate: function () {
debugger;
},
created: function () {
debugger;
},
beforeMount: function () {
debugger;
},
mounted: function () {
debugger;
},
beforeUpdate: function () {
alert(" ");
},
updated: function () {
alert(" ");
},
beforeDestroy: function () {
console.group('beforeDestroy ===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function () {
console.group('destroyed ===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
components: {
'my-components': child
}
});
</script>
</html>우선 페이지 id 가'app'인 요소 에 Vue 인 스 턴 스 vm 를 만 들 었 습 니 다.
3.1.1 루트 구성 요소 의 beforeCreate 단계
이 를 통 해 알 수 있 듯 이 beforeCreate()함 수 를 호출 할 때 필요 한 초기 화 작업 만 했 습 니 다(예 를 들 어 전체 설정 과 루트 인 스 턴 스 의 일부 속성 초기 화).이때 data 속성 은 undefined 이 고 조작 할 수 있 는 데이터 가 없습니다.
3.1.2 루트 구성 요소 의 Created 단계
Created()함 수 를 호출 합 니 다.이 단계 에서 인 스 턴 스 는 다음 과 같은 설정 을 완 료 했 습 니 다.데이터 에이전트 와 동적 데이터 바 인 딩(data observer),속성 과 방법의 연산,watch/event 이벤트 반전.그러나 마 운 트 단계 가 시작 되 지 않 았 습 니 다.$el 속성 은 현재 보이 지 않 습 니 다.
3.1.3 루트 구성 요소 의 beforeMount 단계
boforeMount()함 수 를 호출 하기 전에 대상 에 엘 옵션 이 있 는 지 여 부 를 먼저 판단 합 니 다.있 으 면 계속 아래로 컴 파일 합 니 다.엘 옵션 이 없 으 면 컴 파일 을 중단 합 니 다.이 vue 인 스 턴 스 에서 vm.$mount(el)를 호출 할 때 까지 수명 주 기 를 중단 하 는 것 을 의미 합 니 다.
이 예 에서 우 리 는 엘 요소 가 있 기 때문에 boforeMount()함 수 를 호출 합 니 다.이 때 는 템 플 릿 해석 함 수 를 실행 하기 시 작 했 지만$엘 요 소 를 페이지 에 마 운 트 하지 않 았 기 때문에 페이지 보기 도 업데이트 되 지 않 았 습 니 다.빨 간 곳 에 있 습 니까?{message}}입 니까?여기 가 바로
Virtual DOM(가상 Dom)기술 입 니 다.먼저 구 덩이 를 차지 하 였 습 니 다.뒤쪽 mounted 에 마 운 트 할 때 값 을 렌 더 링 합 니 다.3.1.4 하위 구성 요소 의 beforeCreate,Created,beforeMount,Mounted 단계
부모 구성 요소 가 beforeMount 단 계 를 실행 한 후 하위 구성 요소 의 beforeCreate,Created,beforeMount 단계 에 들 어 갑 니 다.이 단 계 는 부모 구성 요소 와 유사 하 며 표 시 를 누 르 지 않 습 니 다.beforeMount 단계 이후 mounted 단 계 를 실 행 했 습 니 다.이 단계 에서 하위 구성 요 소 는 부모 구성 요소 에 마 운 트 되 었 고 부모 구성 요 소 는 페이지 에 마 운 트 되 었 습 니 다.
다음 그림 에서 알 수 있 듯 이 beforeMount 단계 이후 Mounted 단계 이전에 데 이 터 는 보기 에 불 러 왔 습 니 다.즉,$el 요소 가 페이지 에 마 운 트 되 었 을 때 보기 의 업 데 이 트 를 촉발 하 였 습 니 다.
3.1.5 하위 구성 요소 의 activated 단계
하위 부모 구성 요소 가 모두 페이지 에 마 운 트 된 후에 실 행 된 것 을 발 견 했 습 니 다.하위 구성 요소 my-components 가
3.1.6 부모 구성 요소 의 mounted 단계
mounted 가 실 행 될 때:이 때 엘 은 렌 더 링 이 완료 되 었 고 인 스 턴 스 에 마 운 트 되 었 습 니 다.
이로써 Vue 인 스 턴 스 초기 화 에서 새 템 플 릿 을 페이지 에 마 운 트 하 는 단계 까지 완료 되 었 으 며 debugger 를 종료 합 니 다.다음은 deactivated,beforeUpdate,updated,beforeDestroy,destroyed 갈고리 함 수 를 살 펴 보 겠 습 니 다.
3.2,비활성화,beforeUpdate,업데이트 단계
라 이 프 사이클 함수 에서 알 수 있 듯 이 데이터 가 변 하면 가상 DOM 렌 더 링 이 페이지 를 다시 렌 더 링 하기 전에 beforeUpdate()함수 가 실 행 됩 니 다.이 때 보 기 는 변 하지 않 았 습 니 다.가상 DOM 렌 더 링 페이지 보기 가 업데이트 되면 updated()함수 가 실 행 됩 니 다.
vm.show=false 를 변경 하 십시오.이 속성 을 수정 할 때 beforeUpdate,update 함 수 를 실행 할 뿐만 아니 라 deactivated 함수 도 실행 합 니 다.deactivated 함수 가 beforeUpdate 후에 도 update 후에 호출 될 지 생각해 보 세 요.
우 리 는 콘 솔 에 vm.show=false 를 입력 합 니 다.세 사람의 호출 순 서 는 각각 beforeUpdate,deactivated,updated 입 니 다.우리 가 알 수 있 는 것 은 deactivated 함수 의 트리거 시간 은 보기 업데이트 시 트리거 됩 니 다.보기 가 업데이트 되 었 을 때 keep-alive 구성 요소 가 정지 되 었 음 을 알 수 있 기 때 문 입 니 다.
3.3,beforeDestroy 와 destroyed 갈고리 함수 간 의 생명주기
현재 우 리 는 Vue 인 스 턴 스 를 소각 하고 app.$destroy()방법 을 호출 하면 소각 할 수 있 습 니 다.콘 솔 테스트 는 다음 과 같 습 니 다.
우 리 는 실례 가 여전히 존재 한 다 는 것 을 발 견 했 지만,이때 변 화 는 이미 다른 곳 에서 발생 했다.
beforeDestroy 갈고리 함 수 는 인 스 턴 스 가 소각 되 기 전에 호출 됩 니 다.이 단계 에서 실례 는 여전히 완전히 사용 할 수 있다.
destroyed 갈고리 함 수 는 Vue 인 스 턴 스 를 소각 한 후 호출 합 니 다.호출 후 Vue 인 스 턴 스 가 지시 하 는 모든 것 이 바 인 딩 되 고 모든 이벤트 모니터 가 제거 되 며 모든 하위 인 스 턴 스 가 삭 제 됩 니 다(즉,하위 구성 요소 도 해당 함 수 를 촉발 합 니 다).이곳 의 폐 기 는'지우 기'를 대신 하 는 것 이 아니 라'풀 기'를 나타 낸다.
소각 시 beforeDestory 함수 의 전달 순 서 는 아버지 부터 아들 까지,destory 의 전달 순 서 는 아들 에서 아버지 까지 입 니 다.
4.일부 갈고리 함수 에 대한 생각 은 created 갈고리 에서 data 데 이 터 를 조작 할 수 있 습 니 다.이 럴 때 ajax 요청 을 통 해 되 돌아 온 데 이 터 를 data 에 부여 할 수 있 습 니 다.
updated 함 수 는 데이터 변화 시 촉발 되 지만 그 속성 값 이 바 뀌 었 다 는 것 을 정확하게 판단 할 수 없 기 때문에 실제 상황 에서 computed 나 match 함수 로 속성의 변 화 를 감청 하고 다른 조작 을 합 니 다.mounted 갈고리 에서 마 운 트 된 dom 을 작 동 합 니 다.이 때 DOM 은 페이지 에 렌 더 링 되 었 습 니 다.vue-router 를 사용 할 때
this 상하 문 을 실례 에 자동 으로 연결 하기 때문에 화살표 함 수 를 사용 하여 생명주기 방법(예 를 들 어 created: () => this.fetchTodos())을 정의 할 수 없습니다.이것 은 this 가 아버지 급 을 가리 키 게 한 것 이다.5.소결
로 딩 렌 더 링 과정
beforeCreate-> created-> beforeMount-> beforeCreate-> created-> beforeMount-> mounted-> mounted하위 구성 요소 업데이트 과정 beforeUpdate-> beforeUpdate-> updated-> updated부모 구성 요소 업데이트 과정 beforeUpdate-> updated소각 과정 beforeDestroy-> beforeDestroy-> destroyed-> destroyed총결산위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue 부자 구성 요소 의 생명주기 집행 순서 와 갈고리 함수 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
