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

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

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

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

prop:

1. include: 문자열 또는 정규식. 일치하는 구성 요소만 캐시됩니다.

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

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: '/home',
        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 중국어 웹사이트를 팔로우하세요!

관련 추천:

Vue 컴포넌트 옵션 props 사용 소개

Vue.js 범용 애플리케이션 프레임워크-Nuxt.js 분석

vue.js로 간단히 axios를 구성하는 방법 소개

위 내용은 Keep-Alive 데이터 캐싱을 통한 Vue 프로젝트 최적화 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!