vue 캐 시 keep-alive 의 이해 와 응용 상세 설명
5276 단어 vuekeep-alive
구성 요소 가
구성 요소 상 태 를 유지 하거나 렌 더 링 을 피 하 는 데 사 용 됩 니 다.
keep-alive 는 Vue 의 내 장 된 구성 요소 로 구성 요소 전환 과정 에서 상 태 를 메모리 에 저장 합 니 다.다시 접근 할 때 초기 화 되 지 않 고 떠 나 기 전의 모든 상 태 를 유지 합 니 다.이른바 구성 요소 캐 시 입 니 다.
vue-router 를 사용 하여 구성 요 소 를 전환 할 때 상 태 를 저장 하지 않 습 니 다.router.push()나 router.push()또는 router.replace()를 진행 할 때 오래된 구성 요 소 는 소각 되 고 새 구성 요 소 는 새로 만 들 고 완전한 생명 주 기 를 걸 어 갑 니 다.그래서 캐 시 는 router-view 와 함께 자주 나타 납 니 다.
<keep-alive>
<router-view /> <!-- -->
</keep-alive>
1.activated:keep-alive 구성 요소 활성화 시 호출
2.deactivated:keep-alive 구성 요소 가 정지 되 었 을 때 호출
메모:구성 요소 가 keep-alive 에 감 싸 졌 을 때 만 이 두 개의 생명주기 함수 가 호출 됩 니 다.이 두 개의 갈 고 리 는 서버 에서 렌 더 링 하 는 동안 호출 되 지 않 습 니 다.
응용 필드:
4.567915.다 중 태그 인터페이스의 예 가 있 는데 상세 하 게 소개 했다.
저 희 는 실제 개발 프로젝트 에서 상세 한 페이지 로 넘 어 갈 때 목록 페이지 의 스크롤 바 위 치 를 유지 하고 돌아 갈 때 도 이 위치 에 있 습 니 다.그러면 사용자 체험 을 향상 시 킬 수 있 습 니 다.이 럴 때 캐 시 구성 요소 keep-alive 를 사용 하여 해결 할 수 있 습 니 다.
keep-alive 캐 시 구성 요 소 를 설정 하면 수명 주기 갈고리 가 두 개 더 생 깁 니 다.
구성 요 소 를 떠 날 때 keep-alive 를 사용 하면 beforeDestroy 와 destroyed 갈 고 리 를 호출 하지 않 습 니 다.구성 요소 가 삭제 되 지 않 아 캐 시 되 었 습 니 다.따라서 deactivated 라 는 갈 고 리 는 beforeDestroy 와 destroyed 의 대체 로 볼 수 있 습 니 다.캐 시 구성 요 소 를 소각 할 때 해 야 할 작업 은 이 안에 넣 을 수 있 습 니 다.
필요 사례
최근 프로젝트 에서 캐 시 를 필요 로 하 는 장면 을 만 났 습 니 다.주로 목록 페이지 에서 자세 한 페이지 로 이동 하지만 목록 페이지 는 다단 계 관계 가 있 습 니 다.구체 적 인 수 요 는 다음 과 같 습 니 다.
이 페이지 에 처음 들 어가 면 기본적으로 왼쪽 트 리 구조 메뉴 를 보 여 줍 니 다.어떤 메뉴 를 클릭 하고 오른쪽 에 해당 하 는 데이터 목록 을 불 러 옵 니 다.목록 에서 상세 한 페이지 에 들 어간 다음 에 이 페이지 로 돌아 갑 니 다.이 페이지 는 사용자 가 선택 한 트 리 메뉴 와 데이터 목록 을 유지 하 기 를 바 랍 니 다.다른 페이지 에서 이 페이지 로 들 어 오 면 캐 시 할 필요 가 없습니다.
사례 실천
사고방식:라 우 터 와 결합 하여 메타 정보,캐 시 목록 페이지 를 설정 합 니 다.
1.경로 설정 meta 정보
const List = () => import(/* webpackChunkName: "list" */ '../pages/List.vue')
const Detail = () => import(/* webpackChunkName: "detail" */ '../pages/Detail.vue')
{
path: 'list',
name: 'list',
component: List,
meta: {
title: ' ',
keepAlive: true, //
isKeep: false
}
},
{
path: 'dist',
name: 'detail',
component: Detail
}
<div class="container">
<keep-alive>
<!-- -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
<div class="container">
<keep-alive include="list">
<router-view></router-view>
</keep-alive>
</div>
beforeRouteEnter (to, from, next) {
//
if (from.name === 'detail') {
to.meta.isKeep = true
} else {
to.meta.isKeep = false
}
next()
},
activated () {
if(this.$route.meta.isKeep) {
// ，
} else {
// ，
}
}
watch: {
$route(to, from) {
// to/from.path
}
}
자세 한 상황 에서 목록 으로 돌아 갈 때 는 정상 이지 만 사용자 가 자세 한 페이지 에서 F5 를 누 르 고 새로 고침 한 후에 목록 으로 돌아 가면 떠 나 기 전의 상 태 를 유지 할 수 없습니다.이 때 페이지 가 다시 불 러 오기 때 문 입 니 다.
해결 방법:
현 재 를 떠 나 기 전에 정 보 를 localstorage 에 저장 하고 자세 한 데이터 가 새로 고침 되면 수 동 으로 로드 요청 을 실행 합 니 다.
vue 캐 시 에 관 한 keep-alive 의 이해 와 응용 에 관 한 상세 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue keep-alive 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
