vue3 프로젝트에서 keepAlive를 사용하는 방법에 대한 자세한 설명

이 기사에서는 Vue 프로젝트에서 keepalive를 사용하는 방법에 대해 자세히 설명합니다. Keepalive는 Vue에 내장된 구성 요소로, 메모리 획득 속도를 소모하는 DOM의 반복 렌더링을 방지하기 위해 메모리에 구성 요소를 캐시하는 것입니다. 모두에게 도움이 되기를 바랍니다.

일반적인 사용법은 구성 요소나 경로를 캐시하는 것입니다. 기존 사용법 vue2.x와 vue3.x에는 약간의 차이가 있습니다. 다음은 vue3.0에서 keepaliev의 사용법을 주로 설명합니다.

일반적으로 전체 페이지 캐시를 구성하거나 특정 구성 요소만 캐시 정보를 유지하도록 허용할 수 있습니다. Keepalive 경로나 구성 요소가 구성된 경우 생성->마운트된 수명 주기는 페이지가 두 번째 초기화될 때만 실행됩니다. 이후 해당 페이지에 다시 진입하면 라이프 사이클은 실행되지 않고 캐시 정보를 읽게 됩니다.

1.라우터 구성 캐시

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>

이 시점에서 페이지의 간단한 캐싱이 가능하지만 일부 복잡한 처리가 필요한 경우, 예를 들어 페이지 정보의 일부를 캐시에서 읽을 필요가 없고 입력될 때마다 처리해야 하는 경우 활성화된 수명 주기를 사용하여 문제를 해결할 수 있습니다. 부분 페이지 새로 고침 문제.
3)부분 페이지 새로 고침 실현

먼저 vue의 라이프 사이클을 이해하세요.

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>

구현된 기능은 사용자가 입력할 때마다 동적 인증 코드를 비우도록 설정하는 것입니다. 이 기능은 컴포넌트를 캐시에서 꺼내는 등 다른 방법으로도 구현할 수 있습니다(2. 컴포넌트 참조). 구성 캐시).

4)

경로 keepAlive 속성을 동적으로 설정

때로는 keepalive 캐시를 모두 사용한 후 페이지가 더 이상 캐시되지 않기를 원하거나 다음 페이지의 keepalive 값을 변경할 수 있습니다. 페이지 캐시를 제거하려면 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave를 사용하세요. 사용법은 다음과 같습니다:

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },

2. 구성 요소 구성 캐시

1) 사용 시나리오보통 우리는 vue의 페이지를 캐시합니다. 페이지 특정 구성요소만 캐시하면 됩니다. 또는 동적 구성요소 구성요소를 사용하여 구성요소를 전환하는 경우 해당 구성요소를 캐시해야 합니다.

2) 캐시 페이지 지정 컴포넌트

App.vue에서 사용 시 모든 경로에 해당하는 페이지는 해당 프로젝트에 해당하는 컴포넌트입니다. 사용 방법은 다음과 같습니다.

keep-alive에 include 또는exclude 속성을 사용합니다. include

를 사용한다는 것은 testKA라는 이름의 컴포넌트가 캐시된다는 것을 의미합니다.

activated() {
	// 页面每次进入将手机动态验证码置为空
   this.$refs.mobPwdCode.inputValue = '';},

라우터에 해당하는 페이지에서 다음과 같이 name 속성을 설정해야 합니다.

// to为即将跳转的路由，from为上一个页面路由beforeRouteLeave(to, from,+ next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false;
    next();}

또한 include의 사용법은 다음과 같습니다.

// 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 캐시 구성 요소가 발견되면

는 크로스 레벨

;을 사용할 수 없습니다. 예를 들어 App.vue에서 include 속성을 사용하여 name="a"를 일치시키는 경우입니다. , 캐시 이름은 a(라우팅 페이지)의 하위 구성 요소만 일치할 수 있지만 이름이 "a"인 하위 구성 요소(하위 페이지에서 참조하는 구성 요소)는 캐시할 수 없습니다.

손자 구성 요소를 캐시하려면 전체 하위 구성 요소를 캐시하거나 하위 구성 요소에서 keepalive를 사용할 수 있습니다. Keepalive 사용 지침을 보려면 공식 웹사이트로 이동하여 알아볼 수 있습니다. "vue.js 튜토리얼》】

위 내용은 vue3 프로젝트에서 keepAlive를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!