Vue 캐시 구성요소는 무엇을 의미하나요?

Vue에서 캐시 구성 요소는 "keep-alive"이며 추상 구성 요소입니다. 자체적으로 DOM 요소를 렌더링하지 않으며 구성 요소의 상위 구성 요소 체인에도 나타나지 않습니다. 캐시 구성 요소는 주로 구성 요소 상태를 유지하거나 재렌더링을 방지하는 데 사용됩니다. 동적 구성 요소를 래핑할 때 비활성 구성 요소 인스턴스를 파괴하는 대신 캐시합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

vue에서 캐시 구성 요소는 "연결 유지"이며 추상 구성 요소입니다.

캐시 구성 요소 "keep-alive"

keep-alive는 Vue의 내장 구성 요소로, 동적 구성 요소를 래핑할 때 비활성 구성 요소 인스턴스를 메모리에 남겨두고 요청을 최적화하며 DOM 재실행을 방지합니다. 렌더링

공식 문서: 동적 구성 요소에서 연결 유지 사용

은 주로 구성 요소 상태를 유지하거나 다시 렌더링을 방지하는 데 사용됩니다. 동적 구성 요소를 래핑할 때 비활성 구성 요소 인스턴스를 파괴하는 대신 캐시합니다.

(1) 구성 요소 캐시는 지속되지 않습니다. 애플리케이션이 실행되는 동안에는 다시 렌더링되지 않습니다. 페이지가 새로 고쳐지면 여전히 초기 상태로 돌아갑니다.

(2)는 추상 구성 요소입니다. DOM 요소 자체를 렌더링하지도 않고 구성 요소의 상위 구성 요소 체인에도 나타나지도 않습니다.

(3) 전환되는 구성 요소는 구성 요소의 이름 옵션을 통해든 로컬/글로벌 등록을 통해든 고유한 이름을 가져야 합니다.

(4) 구성 요소 수명 주기 후크 및 캐싱

(5) 포함 및 제외 속성을 사용하면 구성 요소를 조건부로 캐시할 수 있습니다. 둘 다 쉼표로 구분된 문자열, 정규식 또는 배열로 표시될 수 있습니다.

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component>
</keep-alive>

일치에서는 먼저 컴포넌트 자체의 이름 옵션을 확인하고, 이름 옵션을 사용할 수 없는 경우 로컬 등록 이름(상위 컴포넌트의 컴포넌트 옵션 키 값)과 일치합니다. 익명 구성 요소는 일치할 수 없습니다. [학습 영상 공유: vue 영상 튜토리얼, 웹 프론트 엔드 영상]

캐시 구성 요소 사용 시 일부 문제

문제 1: 캐시된 구성 요소가 너무 많거나, 불필요한 구성 요소도 캐시되어 있는 경우 , 과도한 메모리 사용이 발생합니다.

문제 2: 업데이트해야 할 항목이 캐시됩니다. 예를 들어 세부 구성요소가 캐시되면 업데이트되지 않습니다.

전략: 중요하고 빈도가 높은(예: 홈페이지) 또는 많이 변경되지 않는 구성 요소를 캐시하세요.

해결책: 캐시할 경로를 표시한 다음 경로를 로드할 때 캐시할지 여부를 동적으로 결정합니다. 캐시할 컴포넌트를 더욱 정밀하게 제어

컴포넌트 캐싱에 최적화된 작성 방법:

라우트 정의 시 라우팅[메타정보]을 추가하여 일부 정보 요소를 보완합니다.

{ 
  path: '/', 
  component: () => import('../views/home/index.vue'), 
  //是否缓存
  meta: { isKeepAlive: true } 
},

app.vue

<div id="app">
  <keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"/>
  </keep-alive>
  <router-view v-if="!$route.meta.isKeepAlive"/>
</div>

의 메타 메타 정보를 기반으로 구성 요소를 캐시할지 결정합니다. (동영상 공유 학습: 웹 프론트엔드 개발, 기본 프로그래밍 동영상)

위 내용은 Vue 캐시 구성요소는 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!