집 > 기사 > 웹 프론트엔드 > Vue는 연결 유지를 사용하여 인스턴스 공유를 새로 고치지 않고 데이터 캐싱을 구현합니다.

Vue는 연결 유지를 사용하여 인스턴스 공유를 새로 고치지 않고 데이터 캐싱을 구현합니다.

小云云원래의: 2018-01-04 10:51:341277검색

이 글은 새로 고침 없이 데이터 캐싱을 달성하기 위해 Vue에서 Keep-Alive를 사용하는 방법을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있는 자세한 코드가 여기에 있습니다.

지금까지 Vue에 잠깐 노출되어 어느 정도 프로젝트가 진행되었지만, 프로젝트에는 캐싱 메커니즘이 부족하여 페이지가 나올 때마다 데이터가 다시 생성됩니다. 시스템의 데이터 요청 속도가 매우 빠르기는 하지만 시스템의 성능이 크게 저하되므로 여기서는 시스템을 최적화하고 캐시를 추가해야 합니다.

사실 아직까지는 Vue를 마스터하지 못했습니다. 깊게 파고들 때마다 Vue의 훌륭함을 발견하게 됩니다. 처음에는 캐싱을 구현하는 데 무엇을 사용해야 할지 몰랐습니다. 오랫동안 vuex, vuet 또는 keep-alive를 사용하고 비교한 후 vuex와 vuet은 상태 관리를 구현하고 전반적인 목표를 달성하려면 데이터 처리에 중점을 둡니다. 캐싱하고 생성된 새로 고침을 방지하려면 연결 유지를 사용해야 합니다.

여기서는 연결 유지를 사용하여 캐시된 페이지를 구현하는 방법을 소개하고 싶습니다. 실제로는 아주 간단합니다. 몇 문장이면 됩니다.

1. Keep-alive는 반드시 router-view와 함께 사용해야 합니다. 여기서 주의할 점은 keep-alive 자체가 vue-router가 아닌 vue2.0의 기능이므로 vue1.0에서는 지원되지 않는다는 점입니다. 버전. Keep-alive의 공식 문서는 다음과 같이 구현됩니다. Router-view는 APP.vue

<template>
 <p id="app">

  <keep-alive>
   <router-view></router-view>
  </keep-alive>
  
  <!--这里是其他的代码-->
 </p>
</template>

2에 있습니다. 그러나 한 가지 단점은 모든 구성 요소입니다. 캐시되지만 실제로는 목록 데이터와 같은 일부 페이지를 시간에 맞춰 새로 고쳐야 합니다. 세부 정보를 보려면 모두 구성 요소를 공유하고 페이지를 새로 고칠 수 없습니다. 그렇지 않으면 다른 항목을 클릭하게 됩니다. 이는 모두 이전에 캐시된 데이터입니다. 그러면 어떻게 사용자 정의해야 할까요? 그런 다음 라우터 보기에 v-if 판단을 추가한 다음 라우터에서 정의한 파일에 캐시하려는 페이지에 "meta:{keepAlive:true}"를 추가합니다. 원하지 않으면 캐시가 "meta:{keepAlive:false}"이거나 기록되지 않습니다. true인 경우에만 연결 유지에서 인식한 후 캐시됩니다.

<template>
 <p id="app">
  <!--缓存想要缓存的页面，实现后退不刷新-->
  <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  
  <!--这里是其他的代码-->
 </p>
</template>

3. 라우터 파일에 메타 판단을 추가합니다

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;

Vue.use(Router)
export default new Router({
  {//home会被缓存
    path:"/home",
    component:home,
    meta:{keepAlive: true}
  }
  {//hello不会被缓存
    path:"/hello",
    component:hello,
    meta:{keepAlive: false}
  }
})

캐시 성공 여부를 확인하려면 각 구성 요소의 생성된 후크에 출력 플래그를 인쇄하면 됩니다. 처음으로 페이지에 들어가서 데이터를 요청하면 나중에 다시 요청하지 않고 직접 캐시를 호출하게 되므로 결국 데이터 처리 시스템에서는 시스템 성능에 미치는 영향을 크게 줄일 수 있습니다. 데이터가 너무 방대하고 매번 페이지를 요청하기가 매우 어렵습니다. 나쁜 점은 캐시를 사용하면 캐시를 원하지 않더라도 캐시를 실시간으로 새로 고칠 수 있다는 것입니다.

Vue는 연결 유지를 사용하여 인스턴스 공유를 새로 고치지 않고 데이터 캐싱을 구현합니다.

관련 기사