집 >웹 프론트엔드 >JS 튜토리얼 >Keep-Alive 데이터 캐싱을 통한 Vue 프로젝트 최적화 방법

Keep-Alive 데이터 캐싱을 통한 Vue 프로젝트 최적화 방법

不言원래의: 2018-06-29 13:41:181550검색

이 글에서는 Keep-Alive 데이터 캐싱을 통한 Vue 프로젝트 최적화 방법을 주로 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

7c9485ff8c3cba5ae9343ed63c2dc3f7는 Vue에 내장된 구성 요소로, DOM의 반복 렌더링을 방지하기 위해 구성 요소 전환 중에 메모리에 상태를 유지할 수 있습니다.

7c9485ff8c3cba5ae9343ed63c2dc3f7 동적 구성 요소를 래핑할 때 비활성 구성 요소 인스턴스는 삭제되는 대신 캐시됩니다. 300ff3b250bc578ac201dd5fb34a0004과 마찬가지로 7c9485ff8c3cba5ae9343ed63c2dc3f7는 추상 구성 요소입니다. DOM 요소 자체를 렌더링하지도 않고 상위 구성 요소 체인에도 나타나지도 않습니다.

prop:

include: 문자열 또는 정규식. 일치하는 구성 요소만 캐시됩니다.
제외: 문자열 또는 정규식. 일치하는 구성 요소는 캐시되지 않습니다.

vue에서 제공하는 연결 유지를 통해 서버에 대한 요청 수를 줄입니다.

VUE2.0은 구성 요소를 캐시하고 해당 구성 요소를 로드하지 않는 데 사용할 수 있는 연결 유지 방법을 제공합니다. 여러 번 수행하고 성능 소비를 줄입니다. 예를 들어, 그림, 텍스트 등을 포함한 페이지의 데이터를 사용자가 로드한 다음 사용자가 이를 클릭하여 다른 인터페이스로 이동합니다. 그런 다음 다른 인터페이스에서 원래 인터페이스로 돌아갑니다. 설정하지 않으면 서버에서 원래 인터페이스의 정보를 다시 요청하게 됩니다. vue에서 제공하는 keep-alive는 페이지에서 요청한 데이터를 저장하고 요청 수를 줄이며 사용자 경험을 향상시킬 수 있습니다.

캐싱 구성 요소는 사이트 전체 페이지를 캐시하는 구성 요소와 일부 페이지를 캐시하는 구성 요소의 두 가지 유형으로 나뉩니다.

1. 모든 페이지를 캐시합니다. 각 페이지에 요청이 있는 상황에 적합합니다. 방법은 다음과 같습니다. 캐시해야 하는 라우터 뷰를 keep-alive 태그로 래핑합니다.

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

캐싱을 달성하기 위해 생성된 후크에 첫 번째 트리거 요청을 작성합니다. 예를 들어, 목록 페이지에서 세부정보 페이지로 이동하면 다시 돌아올 때 원래 페이지가 그대로 유지됩니다.

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>

router는 다음과 같이 설정됩니다.

 routers:[
      {  path: &#39;/home&#39;,
        name: home,
        meta:{keepAlive: true}   // 设置为true表示需要缓存，不设置或者false表示不需要缓存                    }
     ]

는 새로운 속성 include/exclude를 통해 설정할 수도 있습니다. 이름은 의미를 내포하고, include는 포함한다는 뜻, 제외한다는 의미는 제외됩니다. 여기서는 컴포넌트의 이름을 이용하여 설정해야 하므로 이름을 추가해야 합니다. 구성 요소 a와 b를 추가하려면 캐싱이 필요하지만 구성 요소 c와 d에는 캐싱이 필요하지 않습니다.

<keep-alive include="a,b">
<component></component>
</keep-alive>   
<keep-alive exclude="c,d">
<component></component>
</keep-alive>

고객이 사진을 볼 수 없는 경우 그림을 게으르게 로딩하는 것처럼 구성 요소의 주문형 로딩을 통해 vue 프로젝트의 최적화도 달성할 수 있습니다. 하지만 페이지를 여는 중입니다. 모두 로드되면 요청 시간이 크게 늘어나고 사용자 경험이 저하됩니다. 지연 로딩은 Taobao 및 JD.com과 같은 많은 웹사이트에서 사용됩니다. 스크롤을 빠르게 아래로 내리면 사진이 로딩되는 것을 볼 수 있습니다. 사용 방법에 대한 구체적인 지침은 다른 기사를 참조하세요: vue 프로젝트 최적화를 위한 페이지의 주문형 로딩(vue+webpack)

위 내용은 이 기사의 전체 내용입니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 팔로우하세요!

Keep-Alive 데이터 캐싱을 통한 Vue 프로젝트 최적화 방법

관련 기사