Keep-Alive 구성 요소를 사용하여 Vue 페이지의 콘텐츠 캐싱 구현-View.js-php.cn

Keep-Alive 구성 요소를 사용하여 Vue 페이지의 콘텐츠 캐싱 구현

PHPz

풀어 주다： 2023-07-22 09:04:52

원래의

903명이 탐색했습니다.

Keep-alive 구성 요소를 사용하여 Vue 페이지의 콘텐츠 캐싱 구현

Vue 개발에서는 페이지 성능과 사용자 경험을 개선하기 위해 페이지 콘텐츠를 캐시해야 하는 경우가 종종 있습니다. Vue는 페이지 콘텐츠를 캐시하는 데 사용되는 매우 편리한 구성 요소인 연결 유지를 제공합니다. 이 문서에서는 연결 유지 구성 요소를 사용하여 콘텐츠 캐싱을 구현하고 코드 예제를 제공하는 방법을 소개합니다.

1. keep-alive 구성 요소 소개

keep-alive는 동적 구성 요소 또는 구성 요소 트리를 캐시하는 데 사용되는 Vue.js의 추상 구성 요소입니다. 이는 두 가지 주요 속성을 제공합니다.

include: 캐시해야 하는 구성 요소의 이름을 지정하며 문자열 또는 정규 표현식이 될 수 있습니다. 일치하는 구성 요소만 캐시됩니다.
exclude: 캐시할 필요가 없는 구성 요소의 이름을 지정합니다. 문자열이거나 정규 표현식일 수 있습니다. 일치하는 구성 요소는 캐시되지 않습니다.

2. 페이지 콘텐츠를 캐시하기 위해 연결 유지 구성 요소를 사용합니다.

페이지 콘텐츠를 캐시하기 위해 연결 유지 구성 요소를 사용하는 것은 매우 간단합니다. 캐시해야 하는 구성 요소 외부에 연결 유지 태그만 추가하면 됩니다. 예는 다음과 같습니다.

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

로그인 후 복사

위 예에서는 Vue Router를 사용하여 페이지 점프를 관리하고 라우터 보기 구성 요소를 연결 유지 구성 요소로 래핑합니다. 이러한 방식으로 일치하는 라우팅 구성 요소만 캐시되고 일치하지 않는 다른 구성 요소는 캐시되지 않습니다.

또한 포함 및 제외 속성을 사용하여 캐시해야 하는 구성 요소를 정확하게 지정하거나 캐시할 필요가 없는 구성 요소를 제외할 수도 있습니다. 예는 다음과 같습니다.

<template>
  <keep-alive :include="includeComp" :exclude="excludeComp">
    <router-view></router-view>
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      includeComp: /ComponentA|ComponentB/,
      excludeComp: /ComponentC/
    }
  }
}
</script>

로그인 후 복사

위 예에서는 정규식을 사용하여 캐시해야 하는 구성 요소와 그렇지 않은 구성 요소를 지정했습니다. includeComp 정규식과 일치하는 구성요소 및 제외Comp 정규식과 일치하지 않는 구성요소만 캐시됩니다.

3. 연결 유지 구성 요소의 수명 주기 후크 기능

연결 유지 구성 요소 내부의 캐시 구성 요소는 일련의 수명 주기 후크 기능을 트리거합니다. 이러한 후크 기능을 사용하여 일부 특정 논리 작업을 수행할 수 있습니다. 다음은 일반적으로 사용되는 수명 주기 후크 기능입니다.

활성화됨: 캐시 구성 요소가 페이지에 들어갈 때 트리거되며 이 후크 기능에서 일부 초기화 작업을 수행할 수 있습니다.
deactivated: 캐시 구성 요소가 페이지를 떠날 때 트리거됩니다. 이 후크 기능에서 일부 정리 작업을 수행할 수 있습니다.

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

<script>
export default {
  activated() {
    console.log('缓存组件进入页面');
    // 执行初始化操作
  },
  deactivated() {
    console.log('缓存组件离开页面');
    // 执行清理操作
  }
}
</script>

로그인 후 복사

4. 참고

Keep-alive 구성 요소는 동적 구성 요소 또는 구성 요소 트리에만 적용되며 정적 구성 요소에는 유효하지 않습니다. 또한 연결 유지 구성 요소를 사용할 때는 너무 많은 메모리를 차지하지 않도록 콘텐츠를 너무 많이 캐싱하지 않아야 합니다.

5. 요약

keep-alive 구성 요소를 사용하면 Vue 페이지 콘텐츠를 쉽게 캐시하고 페이지 성능과 사용자 경험을 향상시킬 수 있습니다. 위는 연결 유지 구성 요소의 소개, 사용법 및 수명주기 후크 기능을 소개하고 해당 코드 예제를 제공합니다. Vue 개발에서 연결 유지 구성 요소를 사용하는 것이 도움이 되기를 바랍니다!

참조: