이 기사에서는 Vue 프로젝트에서 keepalive를 사용하는 방법에 대해 자세히 설명합니다. Keepalive는 Vue에 내장된 구성 요소로, 메모리 획득 속도를 소모하는 DOM의 반복 렌더링을 방지하기 위해 메모리에 구성 요소를 캐시하는 것입니다. 모두에게 도움이 되기를 바랍니다.
일반적인 사용법은 구성 요소나 경로를 캐시하는 것입니다. 기존 사용법 vue2.x와 vue3.x에는 약간의 차이가 있습니다. 다음은 vue3.0에서 keepaliev의 사용법을 주로 설명합니다.
일반적으로 전체 페이지 캐시를 구성하거나 특정 구성 요소만 캐시 정보를 유지하도록 허용할 수 있습니다. Keepalive 경로나 구성 요소가 구성된 경우 생성->마운트된 수명 주기는 페이지가 두 번째 초기화될 때만 실행됩니다. 이후 해당 페이지에 다시 진입하면 라이프 사이클은 실행되지 않고 캐시 정보를 읽게 됩니다.
1)1단계: App.vue 구성
vue2.x와 vue3.0의 App.vue 구성에는 차이가 있습니다. :
vue2. 에서는 경로에 해당하는 페이지 바인딩이 있습니다.
2)
2단계: 메타 속성 추가 해당 경로에 메타 속성을 추가하여 페이지를 캐시할지 여부를 다음과 같이 설정합니다.<template> <!-- vue2.x配置 --> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive"/></template>
keepAlive로 래핑된 구성 요소 및 페이지, 페이지에 들어갈 때 실행되는 라이프 사이클은 created->mounted->activated
입니다. ; 그 중 Created->mounted는 페이지가 처음 진입할 때만 실행됩니다. 활성화된 Life Cycle은 페이지가 진입할 때마다 실행되므로 KeepAlive에 넣어두었습니다. 페이지가 이 수명 주기에 들어올 때마다 수행되는 작업이면 충분합니다. 다음 코드는 <template>
<!-- vue3.0配置 -->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive"/>
</router-view> </template>
4)
{
path: "/keepAliveTest",
name: "keepAliveTest",
meta: {
keepAlive: true //设置页面是否需要使用缓存
},
component: () => import("@/views/keepAliveTest/index.vue")
},App.vue에서 사용 시 모든 경로에 해당하는 페이지는 해당 프로젝트에 해당하는 컴포넌트입니다. 사용 방법은 다음과 같습니다.
keep-alive에 include 또는exclude 속성을 사용합니다. includeactivated() {
// 页面每次进入将手机动态验证码置为空
this.$refs.mobPwdCode.inputValue = '';},라우터에 해당하는 페이지에서 다음과 같이 name 속성을 설정해야 합니다.
// to为即将跳转的路由，from为上一个页面路由beforeRouteLeave(to, from,+ next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false;
next();}// APP.vue文件，将页面作为组件缓存<router-view v-slot="{ Component }">
<keep-alive include="testKA">
<component :is="Component"/>
</keep-alive></router-view>exclude 사용법은 include 사용법과 동일합니다. 캐시되지 않는 구성요소를 나타냅니다. 또한 keep-alive에는 캐시된 구성 요소의 최대 수를 나타내는 max 속성도 있습니다. 이 수에 도달하면 가장 오랫동안 액세스되지 않은 캐시된 구성 요소의 인스턴스는 새 인스턴스가 생성되기 전에 삭제됩니다. 생성되었습니다.
export default {
name:'testKA',// keep-alive中include属性匹配组件name
data() {return {}},
activated() {
// keepalive缓存的页面每次进入都会进行的生命周期
},}특정 페이지에서 컴포넌트 전환에 사용하는 경우 사용법은 캐시 라우팅과 동일하지만 단지 페이지를 컴포넌트로 다운그레이드하고, 상위 컴포넌트를 App.vue에서 해당 라우팅 페이지로 다운그레이드합니다.
3) 요약
실제 전투 과정에서 Keepalive 캐시 구성 요소가 발견되면
는 크로스 레벨손자 구성 요소를 캐시하려면 전체 하위 구성 요소를 캐시하거나 하위 구성 요소에서 keepalive를 사용할 수 있습니다. Keepalive 사용 지침을 보려면 공식 웹사이트로 이동하여 알아볼 수 있습니다. "vue.js 튜토리얼》】
위 내용은 vue3 프로젝트에서 keepAlive를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
