Vue keep-alive 실천 총화(추천)
<keep-alive> 동적 구성 요 소 를 패키지 할 때 실행 되 지 않 는 구성 요소 인 스 턴 스 를 캐 시 합 니 다. <transition> 와 비슷 하 다，<keep-alive> 는 추상 적 인 구성 요소 이다.그 자체 가 DOM 요 소 를 과장 하지 않 고 부모 구성 요소 체인 에 나타 나 지 않 는 다.prop:
일반적인 용법:
//
export default {
name: 'test-keep-alive',
data () {
return {
includedComponents: "test-keep-alive"
}
}
}
<keep-alive include="test-keep-alive">
<!-- name test-keep-alive -->
<component></component>
</keep-alive>
<keep-alive include="a,b">
<!-- name a b ， -->
<component :is="view"></component>
</keep-alive>
<!-- ， v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
<!-- name test-keep-alive -->
<component></component>
</keep-alive>
$route.meta 의 keepAlive 속성 사용:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>router에 router 의 메타 정보 meta 를 설정 해 야 합 니 다.
//...router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false //
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true //
}
}
]
})
위의 router 코드 를 예 로 들 면:
<!-- Page1 -->
<template>
<div class="hello">
<h1>Vue</h1>
<h2>{{msg}}</h2>
<input placeholder=" "></input>
</div>
</template>
<!-- Hello -->
<template>
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template>
(2)페이지 1 페이지 로 돌아 가서 이전에 입력 한"asd"가 남아 있 음 을 발견 하면 페이지 정보 가 메모리 에 성공 적 으로 저장 되 었 음 을 나타 낸다.
그림 1 페이지 에 들 어가 서"asd"를 입력 합 니 다.
그림 2 Hello 로 건 너 뛰 기
그림 3 페이지 1 을 되 돌려 줍 니 다.입력 상자 의 데 이 터 는 유 지 됩 니 다.
물론 route.meta 의 keepAlive 속성 을 동적 으로 설정 하여 다른 수 요 를 실현 할 수 있 습 니 다.
vue-router 의 keep-alive이 블 로그 의 예 를 참고 하 세 요.
beforeRouteLeave(to, from, next)갈고리 에 설치 하 는 것 이다to.meta.keepAlive.A 의 경로:
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true //
}
}
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// meta
to.meta.keepAlive = true; // B A ， A ，
next();
}
};
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// meta
to.meta.keepAlive = false; // C A A ，
next();
}
};
keep-alive 생명주기 갈고리 함수:activated,deactivated
사용
<keep-alive>은 데 이 터 를 메모리 에 저장 합 니 다.페이지 에 들 어 갈 때마다 최신 데 이 터 를 가 져 오 려 면 activated 단계 에서 데 이 터 를 가 져 와 원래 created 갈고리 에서 데 이 터 를 가 져 오 는 작업 을 해 야 합 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
