vue 의 생명 주 기 는 모두 몇 단계 입 니까?각각 무엇 입 니까?

총 8 단계 입 니 다.
1.beforeCreate(생 성 전)
2、created(생 성 후)
3.beforeMount(불 러 오기 전)
4.mounted(불 러 온 후)
5.beforeUpdate(업데이트 전)
6、updated(업데이트 후)
7.beforeDestroy(소각 전)
8、destroyed(소각 후)
vue 첫 페이지 로 딩 은 몇 개의 갈고리 함 수 를 촉발 합 니까?
beforeCreate、created、beforeMount、mounted
DOM 렌 더 링 은 어느 주기 에 이미 완성 되 었 습 니까?mountedvue 데이터 동기 화 되 지 않 은 검색 기록
오늘 나 는 vue 비동기 로 데 이 터 를 얻 은 후에 보기 가 업데이트 되 지 않 은 문 제 를 만 났 다.한참 동안 조사 한 후에 야 자신 이 전혀 생각 하지 못 한 구덩이 에 밟 혔 다 는 것 을 알 게 되 었 기 때문에 기록 해 보 았 다.
흔 한 해결 방안
vue 데이터 가 동기 화 되 지 않 는 조사 에 대해 비슷 한 블 로그 가 많 습 니 다.일반적으로 이 유 는 몇 가지 가 있 습 니 다.
데이터 가 설정 되 지 않 았 습 니 다.
설 정 된 데 이 터 는 응답 식 이 아 닙 니 다.
설정 한 데이터 와 보기 의 변 수 는 같 지 않 습 니 다.변 수 를 잘못 설정 한 것 같 습 니 다.
비슷 한 화 제 를 쓴 이상 나 도 관련 해결 방안 을 나열 해 보 겠 다.
this.$set()를 사용 하면,
this.data=JSON.parse(JSON.stringify(data)와 유사 하 게 데이터 납치 여 부 를 조사 할 수 있 습 니 다.
이것 은 제 동료 가 한 번 만난 적 이 있 습 니 다.그 는 그의 변수 안의 일부 속성 이 get/set 를 설정 하지 않 았 기 때 문 입 니 다.(vue 에 의 해 감청 되 지 않 았 기 때문에 응답 식 이 불가능 합 니 다)이 유 는 아마도 그 가 원 변수 에 새로운 속성 을 추 가 했 지만 vue 에 의 해 감청 되 지 않 았 기 때 문 입 니 다.이것 은 매우 현혹 적 인 예 입 니 다.여러분 은 아래 의 코드 를 보 실 수 있 습 니 다.
이것 은 사실 속성 b 가 감청 되 기 를 바 라 는 것 이기 때문에 this.data 에 값 을 다시 부여 하려 고 시도 합 니 다.그러나 유감스럽게도 const data 의 인용 과 this.data 는 같 습 니 다.this.data=data 는 변수의 덮어 쓰 기 를 실현 하지 못 합 니 다.(vue 는 변수 와 이전 이 다 르 기 때문에 변수 안의 모든 속성 을 납치 할 수 있 습 니 다.같은 인용 으로 vue 는 새로운 속성 을 감청 하지 않 습 니 다)

//   
//        data
{
 data(){
 return {
  data:[{a:1}]
 }
 },
 created(){
 /*                  */
 const data = this.data
 data[0].b = 1
 this.data = data
 }
}

아래 의 출력 을 볼 수 있 습 니 다.a 속성 은 get 과 set 가 있 습 니 다.즉,그들 은 이미 응답 식 이지 만 b 는 get/set 가 없습니다.this.data=JSON.parse(JSON.stringify(data)를 사용 하 는 원 리 는 사실상 새로운 대상 을 만 들 기 위해 값 을 다시 부여 하 는 것 이다.

만약 안 된다 면 변수 가 설정 되 어 있 는 지 자세히 확인 해 야 합 니 다.vue 의 Devtools 도 구 를 통 해 보 거나 콘 솔 에 직접 출력 하여 볼 수 있 습 니 다.this 등의 지향 이 틀 리 거나 맞 춤 법 오류 로 변수 할당 이 실 패 했 을 수 있 습 니 다.
보기 의 변수 와 업데이트 하고 자 하 는 변수 가 같은 지,보기 의 변수 가 잘못 쓰 여 있 는 지 확인 해 야 합 니 다.
다른 방법 은 다음 브 라 우 저 를 다시 시작 하고 브 라 우 저 자체 가 이상 한 지 확인 하 는 등 도 포함한다.
다음은 제 개인 적 인 독특한 문제 입 니 다.만약 에 제 가 어떤 문 제 를 만 났 는 지 궁금 하 시 면 아래 에서 읽 으 셔 도 됩 니 다.
문제 설명
chrome 브 라 우 저 에서 vue 프로젝트 를 개발 하 다가 갑자기 비동기 로 데 이 터 를 가 져 온 후 보기 가 업데이트 되 지 않 았 습 니 다.
조사 하 다
이 문 제 는 매우 이상 하 다.왜냐하면 이전에 회사 에 있 을 때 코드 는 분명히 문제 가 없 었 기 때문이다.당시 에 나 는 내 가 부주의 로 어떤 코드 를 고 쳤 는 지 버그 가 생 겼 다 고 생각 했다.물론 나 는 조금도 당황 하지 않 는 다.데이터 가 업데이트 되 지 않 았 잖 아.일반적인 원인 은 다음 과 같은 몇 가지 가 있다.
데이터 가 설정 되 지 않 았 습 니 다.
설 정 된 데 이 터 는 응답 식 이 아 닙 니 다.
설정 한 데이터 와 보기 의 변 수 는 같 지 않 습 니 다.변 수 를 잘못 설정 한 것 같 습 니 다.
결국!!!이런 이유 가 아니 라 vue 의 Devtools 도 구 를 통 해 보 니 데이터 가 정확하게 설정 되 어 있 고 응답 식 이 며 동적 으로 업데이트 할 수 있 습 니 다.저 는 마음 이 놓 이지 않 습 니 다.debugger 를 통 해 중단 점 을 통 해 해당 하 는 data 를 콘 솔 에 출력 했 습 니 다.그 결과 제 가 사용 하고 자 하 는 변 수 는 vue 에 의 해 납치 되 었 음 을 확 인 했 습 니 다.(vue 2 의 응답 식 은 Object.defineProperty 를 통 해 데 이 터 를 감청 하 는 것 입 니 다)
저 는 마음대로 데 이 터 를 캡 처 했 습 니 다.만약 에 변수 속성 이 응답 식 이 라면 다음 그림 에 있 는 get/set 을 더 나 올 것 입 니 다.

이로부터 나 는 나의 데이터 가 응답 식 이라는 것 을 확 인 했 고 보기 의 변수 에 문제 가 없다 는 것 을 거듭 확인 했다.이때 나 는 당황 하기 시작 했다.내 가 조사 하기 어 려 운 구덩이 에 빠 져 나 오지 못 할 것 같 았 다.과연 나 는 여러 가지 방법 을 시 도 했 지만 이 문 제 를 해결 할 방법 이 없 었 다.그동안 나 도 여러 가지 수단 을 써 서 찾 아 보 았 지만 얻 은 것 이 하나 도 없 었 다.
내 가 360 브 라 우 저 에서 이 페이지 를 열 려 고 할 때 까지 페이지 의 데이터 가 동적 으로 새로 고침 될 수 있다 는 것 을 알 게 되 었 습 니 다!!이때 나 는 브 라 우 저의 호환성 문제 나 브 라 우 저 자체 가 이상 하 다 고 반응 했다.
나 는 또 chrome 브 라 우 저 를 다시 시작 하려 고 했 지만 여전히 안 되 었 다.
과연 호환성 문제 일 까?그런데 이유 가 없 잖 아 요.예전 에 회사 에서 정상 이 었 는데 브 라 우 저 버 전과 관련 이 있 었 나 요?이때 나 는 이 데이터 가 일반적인 데이터 와 어떤 차이 가 있 는 지 생각 하기 시작 했다.뚜렷 한 차이 점 은 이 데이터 가 비교적 깊 은 것 이다.설마,데이터 가 너무 깊 게 박 혀 있 으 면 데이터 가 동기 화 되 지 않 을 까?
솔직히 나 는 오랫동안 고민 하 다가 결국 본의 아니 게 진실 을 발견 했다.
진상
내 데 이 터 를 동기 화 할 수 없 게 만 든 진 범 이 Google 에서 이 플러그 인 을 번역 하 다 니...
진실 은 이 렇 습 니 다.저 는 페이지 의 머리 에진실 을 발 견 했 을 때 내 마음 은 무 너 졌 다.그 러 다 보 니 그 이유 가 바로 이것 이 었 다.
이상 의 이 평론 vue 생명주기 에는 모두 몇 단계 가 있 습 니까?각각 무엇 입 니까?바로 편집장 님 께 서 여러분 께 공유 해 주신 모든 내용 입 니 다.참고 해 주시 고 많은 응원 부 탁 드 리 겠 습 니 다.