vue 페이지 후퇴 mounted 함수 가 실행 되 지 않 는 해결 방안
최근 프로젝트 를 하 다가 아주 큰 문제 에 부 딪 혔 습 니 다.a 페이지 에서 b 페이지 로 넘 어가 편집 을 하고 편집 을 마치 고 a 페이지 로 돌아 가 는데 a 페이지 의 갈고리 함수 mounted 를 가지 않 았 습 니 다.데 이 터 는 업데이트 되 지 않 았 습 니 다.
바 이 두 를 대상 으로 한 연 구 를 통 해 마침내 문제점 을 찾 았 다.다음은 이 문제 와 해결 방법 을 기록 하 겠 습 니 다.
의 원리
사실 이 문 제 는 주로 vue 의 생명 주기 와 관련 되 는데 vue 의 생명 주기 에 대한 이해 가 깊 지 않 은 학생 들 은 홈 페이지 에 가서 공부 할 수 있다https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
이 문 제 를 해결 하 는 관건 은 keep-alive 에 대한 이해 와 activated 갈고리 함수 의 사용 에 있다.
프로젝트 에 keep-alive 를 도입 할 때 페이지 가 처음으로 들 어 갑 니 다.갈고리 함수 의 트리거 순서 created->mounted->activated,종료 시 deactivated 를 촉발 합 니 다.다시 들 어 갈 때(전진 또는 후퇴)activated 만 촉발 합 니 다.
keep-alive 이후 페이지 템 플 릿 이 HTML 세 션 으로 초기 화 된 후 다시 들 어가 면 다시 분석 하지 않 고 메모리 의 데 이 터 를 읽 습 니 다.즉,데이터 가 변 할 때 만 VirtualDOM 을 사용 하여 diff 업 데 이 트 를 합 니 다.따라서 페이지 에 들 어 온 데 이 터 는 activated 에 도 넣 어야 합 니 다.데이터 로드 가 완료 되 었 을 때 수 동 으로 DOM 을 조작 하 는 부분 도 activated 에서 실행 되 어야 유효 합 니 다.
따라서 activated 에 데 이 터 를 가 져 온 코드 를 남 겨 두 거나 created 부분 을 제외 하고 created 에 있 는 코드 를 activated 로 직접 옮 겨 야 합 니 다.
html 구조
js 부분--vue 수명 주기
beforeCreate () {
console.log(' ')
}
created () {
console.log(' , , ajax ')
}
beforeMount () {
console.log(' , ; , ')
}
mounted () {
console.log(' , ; , , ')
}
beforeUpdate () {
console.log(' , DOM 。 DOM')
}
updated () {
console.log(' ')
}
beforeDestroy () {
console.log(' , ; , , , ')
}
destroyed () {
console.log(' 。')
}
activated 와 deactivated 는 keep-alive 태그 에 맞 춰 사용 합 니 다!
activated () {
console.log(' , ')
}
deactivated () {
console.log(' ')
}
총결산keep-alive 는 Vue 의 내장 구성 요소 로 구성 요소 전환 과정 에서 상 태 를 메모리 에 저장 하여 중복 렌 더 링 DOM 을 방지 할 수 있 습 니 다.구성 요소 mounted 갈고리 에서 호출 된 페이지 내용 을 새로 고 칠 때 이 갈 고 리 는 호출 되 지 않 았 습 니 다.
그러므로:Vue 구성 요소 전환 과정 을 사용 하여 갈고리 activated(keep-alive 구성 요소 활성화 시 호출)를 실행 합 니 다.갈고리 mounted 를 마 운 트 하 는 것 이 아 닙 니 다.
질문
최근 에 한 항목 에 트 리 메뉴 가 있 습 니 다.데 이 터 를 js(데 드 데이터)에 기록 하면 모든 것 이 정상적으로 실 행 됩 니 다(i 태그,하위 노드,부모 노드).그러나 인터페이스 파일 을 요청 하거나 배경 데 이 터 를 요청 할 때 도 입 된 하위 그룹 부품 의 created 방법 이 실행 되 지 않 지만 부모 메뉴 를 누 르 면 실 행 됩 니 다.나중에 생명주기 의 문제 라 는 것 을 알 게 되 었 습 니 다.자세히 살 펴 본 후에 해결 방법 은 다음 과 같 습 니 다.watch 로 data 의 데이터 변 화 를 검 측 했 습 니 다.created 방법 은 클릭 할 때 실 행 된 것 이기 때문에 보류 해 야 합 니 다.좋 습 니 다.이렇게 하 겠 습 니 다.
이상 의 vue 페이지 에서 mounted 함수 가 실행 되 지 않 는 해결 방안 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.