vue 에서 keepAlive 구성 요소 의 역할 과 사용 방법 에 대한 상세 한 설명
면접 을 볼 때 많은 면접 관 들 이 vue 에 게 다시 물 었 을 때 한 마디 할 수 있 습 니 다.keep-alive 가 무슨 역할 을 하 는 지 아 세 요?
keep-alive 는 vue 에 내 장 된 구성 요소 입 니 다.이 구성 요소 의 역할 은 활성 화 된 구성 요 소 를 캐 시 할 수 있 습 니 다.일반적인 상황 에서 구성 요 소 를 전환 할 때 기본 값 으로 삭 제 됩 니 다.필요 하 다 면 특정한 구성 요 소 를 전환 한 후에 소각 하지 않 고 이전 상 태 를 저장 하면 keep-alive 를 이용 하여 실현 할 수 있 습 니 다.
비계 로 프로젝트 를 만 든 후 홈 과 about 두 개의 구성 요 소 를 만 들 고 길 을 통 해 전환 합 니 다.
홈 구성 요소
<template>
<div class="home">
<input type="text">
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
약 구성 요소
<template>
<div class="about">
<input type="text">
</div>
</template>
<script>
export default {
name:"about"
}
</script>
홈 구성 요소 의 입력 상자 에 내용 을 입력 한 다음 about 구성 요소 로 전환 합 니 다.홈 구성 요소 로 전환 하면 이전에 입력 한 내용 이 비어 있 는 것 을 발견 할 수 있 습 니 다.사실은 이해 하기 쉽 습 니 다.about 구성 으로 전환 할 때 홈 구성 요소 가 삭제 되 고 입력 상자 의 값 이 자 연 스 럽 게 비 워 집 니 다.
나 는 홈 구성 요소 에 destroyed 생명주기 함 수 를 썼 다.
about 구성 요소 로 전환 할 때 홈 구성 요소 의 destroyed 가 촉발 되 어 홈 구성 요소 가 소각 되 었 습 니 다.
그러면 이 때 저 희 는 keep-alive 구성 요 소 를 이용 하여 router-view 구성 요 소 를 패키지 하고 활동 하지 않 는 구성 요 소 를 캐 시 할 수 있 습 니 다.
앱 구성 요소
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
그러나 이것 도 좋 지 않 을 것 입 니 다.about 구성 요소 의 값 도 캐 시 되 었 습 니 다.모든 경로 구성 요소 가 캐 시 되 어 성능 을 심각하게 낭비 하고 수요 에 부합 되 지 않 습 니 다.우 리 는 지금 home 구성 요소 만 캐 시 하고 싶 습 니 다.
keep-alive 에 두 개의 속성 이 있 습 니 다.
문자열 이나 정규 표현 식.일치 하 는 구성 요소 만 캐 시 됩 니 다.
<keep-alive include="home">
<router-view />
</keep-alive>
홈 이 캐 시 되 어 있 는 것 을 발견 할 수 있 지만 about 은 캐 시 되 지 않 았 습 니 다.
그리고 exclude 는 제외 되 었 습 니 다.이것 은 프레젠테이션 이 아 닙 니 다.간단 합 니 다.이것 을 제외 하고 우 리 는 경로 의 meta 속성 을 이용 하여 제어 할 수 있 습 니 다.
{
path: '/',
name: 'home',
meta:{
keepAlive:true
},
component: Home
}
keep-alive 코드 는 v-if 와 결합 하여 소 포 를 할 수 있 습 니 다.meta 의 keepAlive 가 true 로 캐 시 를 할 경우 캐 시 를 하지 않 을 지 여부 가 더 유연 합 니 다.
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
홈 구성 요소 에 activated 와 deactivated 수명 주기 함 수 를 기록 하 였 습 니 다.
activated(){
console.log(" ")
console.log("----------activated--------")
},
deactivated(){
console.log(" ！！ ")
console.log("----------deactivated--------")
}
위의 gif 그림 을 통 해 잘 보 였 다 고 믿 습 니 다.이때 keep-Alive 도 차이 가 많 지 않 습 니 다.
총결산
vue 에서 keepAlive 구성 요소 의 역할 과 사용 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 에서 keepAlive 구성 요소 의 사용 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
