vue 프로젝트 최적화 keep-alive 데이터 캐 시 방법

3034 단어 vuekeep-alive
는 Vue 의 내장 구성 요소 로 구성 요소 전환 과정 에서 상 태 를 메모리 에 저장 하여 중복 렌 더 링 DOM 을 방지 할 수 있 습 니 다.
동적 구성 요 소 를 패키지 할 때 실행 되 지 않 는 구성 요소 인 스 턴 스 를 캐 시 합 니 다.삭제 하 는 것 이 아 닙 니 다.과 비슷 합 니 다.는 추상 적 인 구성 요소 입 니 다.자신 은 DOM 요 소 를 과장 하지 않 고 부모 구성 요소 체인 에 나타 나 지 않 습 니 다.
prop:
  • include:문자열 이나 정규 표현 식.일치 하 는 구성 요소 만 캐 시 됩 니 다.
  • exclude:문자열 이나 정규 표현 식.일치 하 는 구성 요 소 는 캐 시 되 지 않 습 니 다.
    • vue 에서 제공 하 는 keep-alive 를 통 해 서버 에 대한 요청 횟수 를 줄 입 니 다.        
    VUE 2.0 에 서 는 keep-alive 방법 을 제공 합 니 다.캐 시 구성 요 소 를 사용 하여 해당 구성 요 소 를 여러 번 불 러 오지 않도록 성능 소 모 를 줄 일 수 있 습 니 다.예 를 들 어 한 페이지 의 데 이 터 는 그림,문자 등 사용자 가 모두 불 러 온 다음 에 사용 자 는 클릭 을 통 해 다른 화면 으로 넘 어 갔다.그리고 다른 인터페이스 에서 되 돌아 와 원래 의 인터페이스 로 돌 아 왔 다.설정 이 없 으 면 원래 인터페이스의 정 보 를 서버 에 다시 요청 해 야 합 니 다.vue 를 통 해 제 공 된 keep-alive 는 페이지 에서 요청 한 데 이 터 를 저장 하고 요청 횟수 를 줄 이 며 사용자 의 체험 정 도 를 높 일 수 있 습 니 다.
    캐 시 구성 요 소 는 두 가지 로 나 뉘 는데 전체 사이트 의 페이지 를 캐 시 하 는 구성 요소 나 일부 페이지 를 캐 시 하 는 구성 요소 입 니 다.
    1.모든 페이지 를 캐 시 하고 모든 페이지 가 요청 한 경우 에 적 용 됩 니 다.방법 은 다음 과 같 습 니 다.캐 시 가 필요 한 router-view 에서 keep-alive 태그 로 감 싸 줍 니 다.
    
<keep-alive>
<router-view></router-view>
</keep-alive>
    첫 번 째 트리거 요청 을 created 갈고리 에 쓰 면 캐 시 를 실현 할 수 있 습 니 다.예 를 들 어 목록 페이지 에서 상세 한 페이지 를 갔 는데 돌아 온 것 이 원래 의 페이지 였 다.
    2.캐 시 부분 구성 요소 나 페이지 는 router.meta 라 는 속성 을 사용 하여 판단 하 는 방법 으로 이 루어 집 니 다.방법 은 다음 과 같다.              
    
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="! $route.meta.keepAlive">
</router-view>
    라 우 터 설정 은 다음 과 같 습 니 다.
    
 routers:[
      {  path: '/home',
        name: home,
        meta:{keepAlive: true}   //    true      ，     false                           }
     ]
    추가 속성 include/exclude 를 통 해 설정 할 수 있 습 니 다.명사 의,include 에 포 함 된 뜻,exclude 를 제외 한 뜻.구성 요소 의 이름 인 name 을 사용 하여 설정 해 야 하기 때문에 name 은 반드시 추가 해 야 합 니 다.  a,b 구성 요 소 를 추가 하려 면 캐 시,c,d 구성 요 소 는 캐 시 를 필요 로 하지 않 습 니 다.쓰 는 방법 은 다음 과 같다.
    
<keep-alive include="a,b">
<component></component>
</keep-alive>   
<keep-alive exclude="c,d">
<component></component>
</keep-alive>
    vue 프로젝트 의 최 적 화 는 구성 요소 의 필요 에 따라 불 러 오 는 것 을 통 해 이 루어 질 수 있 습 니 다.그림 의 게 으 른 불 러 오 는 것 처럼 고객 이 그 그림 을 전혀 보지 못 하면 우 리 는 페이지 를 열 때 모두 불 러 옵 니 다.그러면 요청 시간 을 크게 늘 리 고 사용자 의 체험 정 도 를 낮 출 수 있 습 니 다.게 으 름 은 많은 사이트 에서 유용 하 다.예 를 들 어 타 오 바 오,경 동 등 쇼핑 사이트,위의 사진 링크 등 이 매우 많다.만약 에 롤러 를 신속하게 아래로 끌 어 내 릴 때 사진 을 불 러 오 는 상황 을 볼 수 있다.구체 적 으로 어떻게 사용 하 는 지,여러분 은 다른 문장 을 볼 수 있 습 니 다.vue 프로젝트 최적화 페이지 의 필요 에 따라 불 러 오기(vue+webpack)
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    자바 스 레 드 join 방법 사용 방법
    웹 팩 컴 파일 다 중 페이지 vue 프로젝트 의 설정 문 제 를 자세히 설명 합 니 다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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