如何使用vue的keep-alive优化页面性能

Vue의 연결 유지를 사용하여 페이지 성능을 최적화하는 방법

소개:
Vue 프로젝트를 개발할 때 종종 상황에 직면하게 됩니다. 페이지 간에 전환할 때 현재 페이지의 구성 요소 인스턴스를 파괴하고 싶지 않고 캐시하고 싶은 경우입니다. 다음 방문 시 성능을 향상할 수 있습니다. Vue는 컴포넌트의 캐싱 기능을 쉽게 구현할 수 있는 Keep-Alive 컴포넌트를 제공합니다. 이 글에서는 Keep-Alive를 사용하여 페이지 성능을 최적화하는 방법을 자세히 소개합니다.

1. 연결 유지 구성 요소 소개
Vue의 연결 유지 구성 요소는 구성 요소를 래핑하고 다음 방문 시 구성 요소 인스턴스를 캐시에 직접 렌더링할 수 있는 추상 구성 요소로, 반복적인 구성 요소 생성 및 삭제를 방지합니다. 따라서 성능이 향상됩니다.

2. 연결 유지의 기본 사용법
연결 유지 구성 요소를 사용하는 것은 매우 간단합니다. 캐시해야 하는 구성 요소 외부에 태그를 중첩하면 됩니다. 예:

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

In 위의 코드인 는 Vue Router에서 제공하는 라우팅 아웃렛입니다. 캐시해야 하는 모든 구성요소로 대체할 수 있습니다.

3. keep-alive의 속성 및 이벤트
keep-alive는 구성 요소 캐시의 수명 주기를 제어하고 모니터링하기 위한 몇 가지 속성과 이벤트를 제공합니다.

1. Attributes
   keep-alive 구성 요소에는 두 가지 주요 속성이 있습니다.

• include: 캐시해야 하는 구성 요소의 이름을 지정하는 배열입니다. include 속성으로 지정된 구성요소만 캐시되며 다른 구성요소는 캐시되지 않습니다. 예:

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

  위 코드에서는 Home 및 About이라는 구성 요소만 캐시되고 다른 구성 요소는 캐시되지 않습니다.

• exclude: 캐시할 필요가 없는 구성 요소 이름의 배열을 지정합니다. 제외 속성으로 지정된 구성 요소는 캐시되지 않지만 다른 구성 요소는 캐시됩니다. 예:

  <keep-alive :exclude="['Login']">
  <router-view></router-view>
  </keep-alive>

  위 코드에서 Login이라는 구성 요소는 캐시되지 않지만 다른 구성 요소는 캐시됩니다.

2. Events
   keep-alive 구성 요소는 캐시 구성 요소의 수명 주기를 모니터링하기 위한 두 가지 이벤트를 제공합니다.

• activated: 구성 요소가 활성화될 때 트리거됩니다. 예:

  <keep-alive @activated="handleActivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleActivated() {
    console.log('Component activated');
  }
  }

  위 코드에서 구성 요소가 활성화되면 handlerActivated 메서드가 호출되어 로그를 인쇄합니다.

• deactivated: 구성 요소가 비활성화될 때 트리거됩니다. 예:

  <keep-alive @deactivated="handleDeactivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleDeactivated() {
    console.log('Component deactivated');
  }
  }

  위 코드에서 구성 요소가 비활성화되면 handlerDeactivated 메서드가 호출되어 로그를 인쇄합니다.

4. 예제 데모
아래에서는 실제 예제를 사용하여 연결 유지를 사용하여 페이지 성능을 최적화하는 방법을 보여줍니다.

1. Vue 프로젝트 생성 및 Vue 라우터 설치:

   vue create keep-alive-demo
   cd keep-alive-demo
   vue add router

2. src/App.vue 파일을 수정하고 를 태그로 묶습니다.

   <template>
     <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
     </div>
   </template>

3. src/router/index.js 파일에 캐시해야 하는 두 구성 요소에 해당하는 두 개의 경로를 추가합니다.

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import Home from '@/views/Home.vue';
   import About from '@/views/About.vue';
   
   Vue.use(VueRouter);
   
   const routes = [
     {
    path: '/',
    name: 'Home',
    component: Home,
     },
     {
    path: '/about',
    name: 'About',
    component: About,
     },
   ];
   
   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
   });
   
   export default router;

4. src/views 디렉터리에 Home.vue 및 About.vue 구성 요소를 만들고 content:
   Home.vue:

   <template>
     <div>
    <h1 id="Home">Home</h1>
    <button @click="handleButtonClick">Click me</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
    handleButtonClick() {
      console.log('Button clicked');
    },
     },
   };
   </script>

About.vue:

<template>
  <div>
    <h1 id="About">About</h1>
    <button @click="handleButtonClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log('Button clicked');
    },
  },
};
</script>

지금까지 페이지 성능을 최적화하기 위해 연결 유지를 사용하는 간단한 예를 완성했습니다.

결론:
Vue의 keep-alive 컴포넌트를 사용하면 컴포넌트의 캐싱 기능을 쉽게 구현할 수 있어 페이지의 렌더링 성능이 향상됩니다. 실제 프로젝트에서는 자주 액세스하고 작동하는 일부 구성 요소를 필요에 따라 캐시하여 반복적인 구성 요소 생성 및 삭제를 방지하고 사용자의 대화형 경험을 최적화할 수 있습니다. 이 기사가 연결 유지를 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 如何使用vue的keep-alive优化页面性能의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!