Vue의 Keep-Alive 캐시 기능 구현

이 글은 주로 vue의 keep-alive 캐시 기능 구현을 소개합니다. 이제 이를 공유하고 참고용으로 제공합니다.

Vue는 컴포넌트 정보 캐싱을 구현합니다

vue 프로젝트를 개발할 때 경로가 다른 컴포넌트로 전환된 후 반환된 후 컴포넌트 데이터가 다시 로드되는 것은 불가피합니다. 이러한 상황을 처리하려면 다음이 필요합니다. 연결 유지를 사용하려면 다시 로드되지 않도록 구성 요소 정보를 캐시합니다.

1. app.vue에서

<keep-alive>
  <router-view></router-view>
</keep-alive>

그러나 이 경우 모든 구성 요소가 캐시되므로 단일 구성 요소를 캐시하는 효과를 얻을 수 없습니다.

그런 다음 몇 가지 구성 요소를 추가하고 구현 방법은 다음과 같습니다.

In app.vue

<!--这里是需要keepalive的-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>

<!-- 这里不会被keepAlive -->

<router-view v-if="!$route.meta.keepAlive"></router-view>

2. 라우팅 index.js 페이지에서

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // 这个是需要keepalive的
}，
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // 这是不会被keepalive的
}

이것은 일부 컴포넌트의 캐싱 기능을 구현했습니다

캐시된 컴포넌트가 데이터를 지우거나 초기화 방법을 수행하려면 다음과 같이 컴포넌트 로드 시 활성화된 Hook 함수를 호출하세요.

activated: function () {
  this.data = ‘'
}

위 내용은 제가 컴파일한 내용입니다. 모두를 위해, 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

아주 실용적인 ajax 사용자 등록 모듈

Ajax를 클릭하면 데이터 목록이 계속 로드됩니다(그래픽 튜토리얼).

Ajax+Struts2는 인증 코드 확인 기능을 구현합니다(그래픽 튜토리얼)

위 내용은 Vue의 Keep-Alive 캐시 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!