vue 캐 시 keep-alive 의 이해 와 응용 상세 설명

5276 단어 vuekeep-alive
공식 설명:
동적 구성 요 소 를 패키지 할 때 실행 되 지 않 는 구성 요소 인 스 턴 스 를 캐 시 합 니 다.삭제 하 는 것 이 아 닙 니 다.과 비슷 합 니 다.는 추상 적 인 구성 요소 입 니 다.자신 은 DOM 요 소 를 과장 하지 않 고 구성 요소 의 부모 구성 요소 체인 에 나타 나 지 않 습 니 다.
구성 요소 가에서 전환 되면 activated 와 deactivated 라 는 두 생명 주기 갈고리 함수 가 대응 하여 실 행 됩 니 다.
구성 요소 상 태 를 유지 하거나 렌 더 링 을 피 하 는 데 사 용 됩 니 다.
keep-alive 는 Vue 의 내 장 된 구성 요소 로 구성 요소 전환 과정 에서 상 태 를 메모리 에 저장 합 니 다.다시 접근 할 때 초기 화 되 지 않 고 떠 나 기 전의 모든 상 태 를 유지 합 니 다.이른바 구성 요소 캐 시 입 니 다.
vue-router 를 사용 하여 구성 요 소 를 전환 할 때 상 태 를 저장 하지 않 습 니 다.router.push()나 router.push()또는 router.replace()를 진행 할 때 오래된 구성 요 소 는 소각 되 고 새 구성 요 소 는 새로 만 들 고 완전한 생명 주 기 를 걸 어 갑 니 다.그래서 캐 시 는 router-view 와 함께 자주 나타 납 니 다.

<keep-alive>
  <router-view /> <!--                   -->
</keep-alive>
keep-alive 에 포 함 된 구성 요소 입 니 다.두 개의 생명주기 갈고리 가 더 나 옵 니 다.activated 와 deactivated:
1.activated:keep-alive 구성 요소 활성화 시 호출
2.deactivated:keep-alive 구성 요소 가 정지 되 었 을 때 호출
메모:구성 요소 가 keep-alive 에 감 싸 졌 을 때 만 이 두 개의 생명주기 함수 가 호출 됩 니 다.이 두 개의 갈 고 리 는 서버 에서 렌 더 링 하 는 동안 호출 되 지 않 습 니 다.
응용 필드:
4.567915.다 중 태그 인터페이스의 예 가 있 는데 상세 하 게 소개 했다.
저 희 는 실제 개발 프로젝트 에서 상세 한 페이지 로 넘 어 갈 때 목록 페이지 의 스크롤 바 위 치 를 유지 하고 돌아 갈 때 도 이 위치 에 있 습 니 다.그러면 사용자 체험 을 향상 시 킬 수 있 습 니 다.이 럴 때 캐 시 구성 요소 keep-alive 를 사용 하여 해결 할 수 있 습 니 다.
keep-alive 캐 시 구성 요 소 를 설정 하면 수명 주기 갈고리 가 두 개 더 생 깁 니 다.
  • 구성 요소 에 처음 들 어 갈 때:beforeRouteEnter>beforeCreate>created>mounted>activated>...>beforeRouteLeave>deactivated
  • 다시 구성 요소 에 들 어 갈 때:beforeRouteEnter>activated>...>beforeRouteLeave>deactivated
    • 캐 시 된 구성 요소 에서 activated 갈고리 함수 가 매번 트리거 되 기 때문에 이 갈 고 리 를 통 해 현재 구성 요소 가 캐 시 된 데 이 터 를 사용 해 야 하 는 지,아니면 인터페이스 로 데 이 터 를 다시 불 러 와 야 하 는 지 판단 할 수 있 습 니 다.keep-alive 구성 요 소 를 사용 하지 않 으 면 페이지 가 되 돌아 갈 때 페이지 를 다시 렌 더 링 하고 구성 요소 에 처음 들 어 가 는 일련의 수명 주기 도 일일이 실 행 됩 니 다.
    구성 요 소 를 떠 날 때 keep-alive 를 사용 하면 beforeDestroy 와 destroyed 갈 고 리 를 호출 하지 않 습 니 다.구성 요소 가 삭제 되 지 않 아 캐 시 되 었 습 니 다.따라서 deactivated 라 는 갈 고 리 는 beforeDestroy 와 destroyed 의 대체 로 볼 수 있 습 니 다.캐 시 구성 요 소 를 소각 할 때 해 야 할 작업 은 이 안에 넣 을 수 있 습 니 다.
    필요 사례
    최근 프로젝트 에서 캐 시 를 필요 로 하 는 장면 을 만 났 습 니 다.주로 목록 페이지 에서 자세 한 페이지 로 이동 하지만 목록 페이지 는 다단 계 관계 가 있 습 니 다.구체 적 인 수 요 는 다음 과 같 습 니 다.

    이 페이지 에 처음 들 어가 면 기본적으로 왼쪽 트 리 구조 메뉴 를 보 여 줍 니 다.어떤 메뉴 를 클릭 하고 오른쪽 에 해당 하 는 데이터 목록 을 불 러 옵 니 다.목록 에서 상세 한 페이지 에 들 어간 다음 에 이 페이지 로 돌아 갑 니 다.이 페이지 는 사용자 가 선택 한 트 리 메뉴 와 데이터 목록 을 유지 하 기 를 바 랍 니 다.다른 페이지 에서 이 페이지 로 들 어 오 면 캐 시 할 필요 가 없습니다.
    사례 실천
    사고방식:라 우 터 와 결합 하여 메타 정보,캐 시 목록 페이지 를 설정 합 니 다.
    1.경로 설정 meta 정보
    
const List = () => import(/* webpackChunkName: "list" */ '../pages/List.vue')
const Detail = () => import(/* webpackChunkName: "detail" */ '../pages/Detail.vue')
{
  path: 'list',
  name: 'list',
  component: List,
  meta: {
    title: '  ',
    keepAlive: true, //    
    isKeep: false
  }
},
{
  path: 'dist',
  name: 'detail',
  component: Detail
}
    2.렌 더 링 일치 보기 구성 요소 router-view 수정(일반적으로 app.vue 파일 로 실제 수요 에 따라 다 릅 니 다)
    
<div class="container">
  <keep-alive> 
    <!--           -->
    <router-view v-if="$route.meta.keepAlive"></router-view> 
   </keep-alive>
   <!--            -->
   <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
    keep-alive 구성 요소 의 include/exclude 속성 도 사용 할 수 있 습 니 다.include 는 캐 시 할 구성 요소 이름(정 의 된 name 속성)을 표시 하 며,exclude 는 반대로 일치 하 는 구성 요 소 는 캐 시 되 지 않 습 니 다.
    
<div class="container">
  <keep-alive include="list">
    <router-view></router-view> 
   </keep-alive>
</div>
    3.캐 시가 필요 한 페이지 에 서 는 내 비게 이 션 을 통 해 beforerRouteEnter 와 activated 갈 고 리 를 통 해 캐 시 를 사용 할 지,다시 렌 더 링 할 지 판단 합 니 다.
    
beforeRouteEnter (to, from, next) {
  //           
  if (from.name === 'detail') {
    to.meta.isKeep = true
  } else {
    to.meta.isKeep = false
  }
  next()
},
activated () {
  if(this.$route.meta.isKeep) {
    //     ，     
  } else {
    //     ，         
  }
}
    여기 beforerRoute Enter 갈고리 도 watch 속성 감청 루트 의 변 화 를 사용 할 수 있 습 니 다.
    
watch: {
  $route(to, from) {
    //  to/from.path                  
  }
}
    질문:
    자세 한 상황 에서 목록 으로 돌아 갈 때 는 정상 이지 만 사용자 가 자세 한 페이지 에서 F5 를 누 르 고 새로 고침 한 후에 목록 으로 돌아 가면 떠 나 기 전의 상 태 를 유지 할 수 없습니다.이 때 페이지 가 다시 불 러 오기 때 문 입 니 다.
    해결 방법:
    현 재 를 떠 나 기 전에 정 보 를 localstorage 에 저장 하고 자세 한 데이터 가 새로 고침 되면 수 동 으로 로드 요청 을 실행 합 니 다.
    vue 캐 시 에 관 한 keep-alive 의 이해 와 응용 에 관 한 상세 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue keep-alive 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!
    sql 중복 데 이 터 를 삭제 하 는 자세 한 방법
    SQL Server 에서 중복 데 이 터 를 삭제 하 는 몇 가지 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage