vue에 캐싱 메커니즘이 있습니까?

vue에는 "keep-alive"를 사용하여 전환된 구성 요소를 메모리에 유지하고 구성 요소의 상태를 유지하거나 다시 렌더링을 방지하고 페이지 캐싱을 구현할 수 있습니다. vue 구성 요소의 내장 추상화는 동일한 구성 요소를 여러 번 로드하는 것을 방지하고 성능 소비를 줄이기 위해 구성 요소를 캐시하는 데 사용됩니다.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue에 캐싱 메커니즘이 있나요?

PC에서든 모바일에서든 캐싱은 피할 수 없는 문제입니다. vue에는 keepAlive가 있습니다. 이 API는 기본적으로 우리의 개발 요구 사항 중 일부를 충족할 수 있습니다.

연결 유지에 대한 간략한 소개:

1. 전환된 구성 요소를 메모리에 유지하여 상태를 유지하거나 다시 렌더링을 방지하고 페이지 캐싱을 구현할 수 있습니다.

2. , DOM 요소 자체를 렌더링하지 않으며 상위 구성 요소 체인에도 나타나지 않습니다.

3. 내에서 구성 요소가 전환되면 해당 구성 요소의 두 가지 수명 주기 후크 기능(활성화 및 비활성화)이 그에 따라 실행됩니다. (이것은 기본적으로 아무것도 아닙니다.)

참고: 2.2.0 이상 버전에서는 트리의 모든 중첩 구성 요소에서 활성화 및 비활성화가 트리거됩니다.​

keep-alive는 Vue에 내장된 구성 요소입니다. 동적 구성 요소를 래핑할 때 비활성 구성 요소 인스턴스를 파괴하는 대신 캐시합니다.

기능:

은 구성 요소를 캐시하고, 동일한 구성 요소를 여러 번 로드하지 않고, 성능 소비를 줄이고, 사용자 경험을 향상시키는 데 사용됩니다.

사용 예:

App.vue에서 keep-alive 태그를 사용하여 모든 페이지를 캐시하세요

  <div id="app">
  <keep-alive>
    <tar-bar></tar-bar>
    <div class="container">
      <left-menu></left-menu>
      <Main />
    </div>
    </keep-alive>
  </div>

일부 페이지 캐시

참고: 전환은 이 두 페이지 외부에 직접 래핑됩니다. 오류 전환 그룹을 직접 사용하면 오류가 보고되며 두 개의 전환을 사용해야 합니다.

【관련 추천: "vue.js tutorial"】

위 내용은 vue에 캐싱 메커니즘이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!