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)

위 내용은 제가 여러분에게 도움이 되기를 바랍니다. 미래.

관련 기사:

JQUERY를 사용하여 여러 AJAX 요청을 구현하는 방법

양식 데이터 형식을 사용하여 NodeJs에서 파일을 전송하는 방법

WeChat 애플릿에서 이미지 지연 로딩을 구현하는 방법

사용법 js에서 포커스 맵 효과를 얻는 방법

위 내용은 vue에서 연결 유지를 통해 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!