연결 유지 캐시 기능을 사용하는 방법

이번에는 연결 유지캐싱 기능을 사용하는 방법과 연결 유지 캐싱 기능을 사용할 때 주의 사항이 무엇인지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

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

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的
}

이것은 일부 구성 요소를 실현합니다.

캐시된 구성요소가 데이터를 삭제하거나 초기화 방법을 수행하려는 경우 구성요소를 로드할 때 다음과 같이 활성화된 후크

function을 호출하세요.

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 내용에 주목하세요. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!

추천 도서:

Vue.js

js-cookie 사용 단계에 대한 자세한 설명
에서 계산된 메서드와 메서드의 사용 및 차이점

위 내용은 연결 유지 캐시 기능을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!