Vue의 연결 유지 구성 요소를 통해 페이지의 반복 렌더링을 줄이는 방법

Vue의 연결 유지 구성 요소를 통해 페이지의 반복 렌더링을 줄이는 방법

Vue.js에서 페이지의 반복 렌더링은 일반적인 문제입니다. 페이지를 전환하거나 여러 구성 요소 간에 이동할 때 Vue는 전체 구성 요소 트리를 다시 렌더링하며 이 프로세스는 많은 컴퓨팅 리소스와 시간을 소비할 수 있습니다. 이 문제를 해결하기 위해 Vue는 페이지의 반복 렌더링을 줄이는 데 도움이 되는 keep-alive라는 내장 구성 요소를 제공합니다.

keep-alive 구성 요소는 상태 저장 하위 구성 요소를 캐싱하기 위해 Vue에서 제공하는 추상 구성 요소입니다. 그 기능은 하위 구성 요소를 캐시하여 파괴되거나 다시 생성되는 것을 방지함으로써 페이지의 반복 렌더링 비용을 줄이는 것입니다. 페이지 성능을 최적화하기 위해 연결 유지 구성 요소를 사용하는 방법을 살펴보겠습니다.

먼저 상위 구성 요소의 연결 유지 구성 요소를 사용하여 캐시해야 하는 하위 구성 요소를 래핑해야 합니다. 예를 들어 페이지를 전환할 때 캐시하려는 Home이라는 하위 구성 요소가 있습니다. 아래와 같이 연결 유지 구성 요소로 래핑할 수 있습니다.

<template>
  <keep-alive>
    <Home />
  </keep-alive>
</template>

다음으로 연결 유지 구성 요소의 속성을 설정하여 페이지 렌더링을 더욱 최적화할 수 있습니다. 연결 유지 구성 요소는 캐시해야 하는 구성 요소와 캐시할 필요가 없는 구성 요소를 지정하기 위해 포함 및 제외 속성을 제공합니다.

예를 들어, 모든 하위 구성요소를 캐시하려면 include 속성을 "*"로 설정할 수 있습니다.

<template>
  <keep-alive :include="['*']">
    ...
  </keep-alive>
</template>

특정 하위 구성요소만 캐시하려면 include 속성을 다음을 포함하는 배열로 설정할 수 있습니다. 캐시된 하위 구성 요소의 필수 이름:

<template>
  <keep-alive :include="['Home', 'About']">
    ...
  </keep-alive>
</template>

include 속성 외에도 연결 유지 구성 요소는 캐시할 필요가 없는 구성 요소를 지정하는 데 사용되는 제외 속성도 제공합니다. include 속성과 유사하게, 제외 속성을 "*"로 설정하여 모든 구성 요소를 제외하거나 캐시할 필요가 없는 하위 구성 요소의 이름을 포함하는 배열로 설정할 수 있습니다.

keep-alive 구성 요소를 사용하는 동안 페이지 렌더링을 더욱 최적화하기 위해 제공되는 후크 기능을 사용할 수도 있습니다. 연결 유지 구성 요소에는 활성화 및 비활성화라는 두 가지 후크 기능이 있습니다. 활성화된 후크 함수는 컴포넌트가 활성화될 때 호출되고, 비활성화된 후크 함수는 컴포넌트가 비활성화될 때 호출됩니다.

하위 구성 요소가 캐시에 의해 활성화될 때 실행되어야 하는 활성화된 후크 기능에서 일부 논리를 실행할 수 있습니다. 예를 들어 활성화된 후크 기능에서 네트워크 요청을 보내 하위 구성 요소의 데이터를 업데이트할 수 있습니다. 마찬가지로 비활성화된 후크 기능에서는 캐시된 데이터 지우기 등과 같이 하위 구성 요소가 비활성화될 때 실행해야 하는 일부 로직을 수행할 수 있습니다.

다음은 활성화된 후크 기능을 사용하는 예입니다.

<template>
  <keep-alive :include="['Home']">
    <Home />
  </keep-alive>
</template>

<script>
export default {
  components: {
    Home
  },
  activated() {
    // 在子组件被激活时执行的逻辑
    this.$http.get('/api/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

keep-alive 구성 요소를 사용하면 페이지의 반복 렌더링을 효과적으로 줄이고 페이지의 성능과 사용자 경험을 향상시킬 수 있습니다. 동시에 포함 및 제외 속성, 후크 기능 및 기타 기능을 사용하여 페이지 렌더링을 더욱 최적화할 수도 있습니다. 이 기사가 Vue의 연결 유지 구성 요소를 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 Vue의 연결 유지 구성 요소를 통해 페이지의 반복 렌더링을 줄이는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!