Vue 2.0 생명주기 이해
beforeCreate-->created 사이
이 단계 에서 사건 을 초기 화하 고 데이터 관측 을 한다.
created
vue 인 스 턴 스 생 성 후 호출 되 었 습 니 다.이 때 데이터 관측(data observer),속성 과 방법의 연산,watch/event 이벤트 리 셋 설정 이 완료 되 었 습 니 다.
methods 의 방법 을 호출 하여 data 의 데 이 터 를 방문 하고 수정 하 며 응답 식 변 화 를 촉발 하여 DOM 렌 더 링 을 업데이트 시 키 고 watch 에 해당 하 는 방법 을 촉발 하여 coptute 관련 속성 을 다시 계산 할 수 있 습 니 다.
일반적으로 created 에서 ajax 요청 을 통 해 인 스 턴 스 데 이 터 를 초기 화 합 니 다.
이 때 vm.$el 이 보이 지 않 습 니 다.
created-->beforeMount 사이
이 과정 에서
a.인 스 턴 스 에 엘 옵션 이 있 는 지 먼저 판단 하고,있 으 면 계속 아래로 컴 파일 합 니 다.없 으 면 컴 파일 을 중단 합 니 다.vm.$mount(el)가 호출 될 때 까지 계속 합 니 다(엘 은 마 운 트 된 DOM 노드 입 니 다).
b.다음 에 인 스 턴 스 에 template 가 있 는 지 판단 하고 있 으 면 템 플 릿 으로 rander 함수 로 컴 파일 합 니 다.
c.template 가 없 으 면 DOM 요 소 를 마 운 트 한 html(즉,el 에 대응 하 는 DOM 요소 와 내부 요소)를 템 플 릿 으로 추출 하여 컴 파일 합 니 다.
*주:엘 에 대응 하 는 DOM 요 소 는 body/html 요소 가 될 수 없습니다.뒤에 vue 인 스 턴 스 가 마 운 트 될 때 엘 에 대응 하 는 DOM 요소 와 내부 요 소 는 템 플 릿 에 나타 난 새로운 DOM 으로 바 뀌 기 때 문 입 니 다.
d.인 스 턴 스 대상 에 rander 함수 가 있 으 면 직접 렌 더 링 작업 을 합 니 다.
우선 순위:rander 함수>template>외부 html
이 때 랜 더 함수 가 준비 되 어 있 고 처음으로 호출 되 었 습 니 다.
이 과정 에서$el 은 인 스 턴 스 에서 el 옵션 에 대응 하 는 DOM 요소 로 초기 화 되 었 기 때문에 beforeMount 에서 vm.$el 로 DOM 요 소 를 마 운 트 한 html 를 가 져 왔 습 니 다.
beforeMount
beforeMount 가 호출 되 었 을 때$el 을 볼 수 있 습 니 다.
beforeMount-->마 운 트 된 사이
이 과정 에서 엘 은 새로 만 든 vm.$el 로 교체 되 고 인 스 턴 스 마 운 트 를 완료 합 니 다.즉,인 스 턴 스 의 엘 옵션 은 템 플 릿 렌 더 링 에 의 해 만들어 진 DOM 요소 로 바 뀌 었 고 페이지 의 마 운 트 지점 이 렌 더 링 된 vue 인 스 턴 스 코드 세그먼트 로 바 뀌 었 습 니 다.
Mounted
이 때 인 스 턴 스 가 DOM 에 마 운 트 되 었 습 니 다.DOM API 를 통 해 인 스 턴 스 의 DOM 노드 를 가 져 올 수 있 습 니 다.콘 솔 에서 vm.$el 을 인쇄 하 였 습 니 다.이전 마 운 트 지점 과 내용 이 새 DOM 으로 바 뀌 었 음 을 발 견 했 습 니 다.
다음은 밤 을 통 해 이 두 과정 을 살 펴 보 자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
</head>
<body>
<div id="app">
<a id='ela' href="">{{message}}</a>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
message: 'hello'
};
},
template: '<p id="elp">{{message}}</p>',
beforeMount: function () {
console.group('beforeMount ===============》');
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
let a = document.getElementById('ela');
let p = document.getElementById('elp');
console.log(this.$el);
console.log(state);
console.log(a); // <a id='ela' href="">{{message}}</a>
console.log(p); // null
},
mounted: function () {
console.group('mounted ===============》');
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
let a = document.getElementById('ela');
let p = document.getElementById('elp');
console.log(this.$el);
console.log(state);
console.log(a); // null
console.log(p); // <p id="elp">father</p>
}
</script>
</html>
template/rander 옵션 을 사용 하면 콘 솔 에서 똑똑히 볼 수 있 습 니 다.마 운 트 가 완료 되면 엘 은 새로 만 든 vm.$el 로 대 체 됩 니 다.
마 운 트 하기 전에 초기 엘 과 가상 DOM 형식 으로 존재 합 니 다.이 때 template 의 내용 을 템 플 릿 으로 하고 템 플 릿 의 내용 을 볼 수 없 으 며 인쇄 p 라벨 은 null 입 니 다.
마 운 트 후 템 플 릿 렌 더 링 의 새 DOM 은 원래 의 el 을 교체 합 니 다.원래 의 el 에 대응 하 는 DOM 이 존재 하지 않 습 니 다.a 탭 을 null 로 인쇄 합 니 다.
beforeUpdate 와 updated
data 대상 에서 데이터 가 업 데 이 트 될 때 beforeUpdate 갈 고 리 를 터치 합 니 다.이 때 view 층 은 업데이트 되 지 않 았 습 니 다.beforeUpdate 에는 다음 과 같은 몇 가지 주의 할 점 이 있 습 니 다.
a.업 데 이 트 된 데 이 터 는 템 플 릿 에서 직접 또는 간접 적 으로 사용 해 야 beforeUpdate 를 실행 할 수 있 습 니 다.
b、마 운 트 하기 전에 data 에서 데이터 업 데 이 트 는 beforeUpdate 를 실행 하지 않 습 니 다!즉,created,beforeMount 에서 데 이 터 를 바 꿀 때 업데이트 절 차 를 실행 하지 않 습 니 다.
c.beforeUpdate 에서 이 데이터 의 값 을 다시 수정 하면 beforeUpdate 갈 고 리 를 다시 터치 하여 두 번 업데이트 절 차 를 진행 합 니 다.
updated 시 view 층 이 업데이트 되 었 습 니 다.
(위의 코드 에 갈고리 두 개 추가)
mounted: function () {
this.message = 'first';
// this.show = false; // show， show beforeUpdate
},
beforeUpdate: function () {
console.group('beforeUpdate ===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
},
updated: function () {
console.group('updated ===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
}
여기 서 주의해 야 할 점 이 있 습 니 다.view 층 은 innerHTML 을 통 해 해당 요소 노드 의 내용 을 가 져 와 야 합 니 다.요소 노드 를 직접 가 져 올 수 없습니다.요소 노드 를 직접 가 져 옵 니 다.콘 솔 에서 인쇄 된 view 층 의 데 이 터 는 모두 업 데 이 트 된 상태 입 니 다.실시 간 으로 정확 한 값 을 출력 할 수 없습니다.이것 은 Chrome 콘 솔 의 출력 과 관련 이 있 을 것 입 니 다.
세 번 째 조 에 대해 다음 코드 시연 을 살 펴 보 겠 습 니 다.
mounted: function () {
this.message = 'first';
},
beforeUpdate: function () {
console.group('beforeUpdate ===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
this.message = 'second'; // beforeUpdate message
},
updated: function () {
console.group('updated ===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
}
여기 서 우 리 는 두 번 의 업데이트 절 차 를 진행 한 것 을 똑똑히 볼 수 있 지만 인쇄 결과 에 대해 의문 이 있 습 니 다.처음으로 message 의 값 을 first 로 바 꾸 고 first 로 DOM 을 업데이트 하 는 것 을 보 여 줍 니 다.그러면 첫 번 째 updated 를 호출 할 때 message 와 DOM 의 값 은 모두 first 이 어야 합 니 다.이때 인쇄 될 때 second 입 니 다.제 가 이해 하 는 것 은 첫 번 째 updated 를 실 행 했 을 때 DOM 은 두 번 째 렌 더 링 업 데 이 트 를 완 성 했 고 구체 적 인 과정 은 그 후에 소스 코드 에 대한 학습 을 통 해 이해 해 야 한 다 는 것 입 니 다.여기 서 여러분 은 서로 다른 이해 나 더 자세 한 설명 이 있 으 면 댓 글 에 댓 글 을 달 고 함께 공부 할 수 있 습 니 다.
여기 서 우 리 는 beforeUpdate 에 타 이 머 를 추가 하여 message 의 값 을 수정 할 수 있 습 니 다.첫 번 째 데이터 변 화 를 기다 릴 수 있 습 니 다.DOM 업데이트 렌 더 링 이 완 료 된 후에 두 번 째 데이터 변 화 를 진행 할 수 있 습 니 다.
beforeUpdate: function () {
console.group('beforeUpdate ===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
var that = this;
setTimeout(function(){
that.message = 'second';
});
// this.message = 'second'; // beforeUpdate message
},
두 번 의 데이터 가 바 뀌 었 을 때 데이터 와 view 층 의 업데이트 상 태 를 볼 수 있 습 니 다.
beforeDestroy 와 destroyed
beforeDestroy:인 스 턴 스 는 소각 하기 전에 호출 됩 니 다.이 인 스 턴 스 는 여전히 사용 할 수 있 습 니 다.
beforeDestroy->destroyed:Vue 인 스 턴 스 가 지시 하 는 모든 것 이 바 인 딩 되 고 모든 이벤트 모니터 가 제거 되 며 모든 하위 인 스 턴 스 도 소 멸 됩 니 다.
destroyed:vue 인 스 턴 스 를 소각 하고 호출 합 니 다.
끝:vue 생명주기 에 대한 정리 가 끝 났 습 니 다.잘못된 부분 이 있 으 면 지적 해 주 십시오.제때에 수정 하 겠 습 니 다!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
