연결 유지를 사용하여 Vue에서 구성 요소 성능을 최적화하는 방법

Vue에서 구성 요소 성능을 최적화하기 위해 연결 유지를 사용하는 방법

웹 애플리케이션이 더욱 복잡해짐에 따라 프런트 엔드 성능 최적화가 점점 더 중요해지고 있습니다. Vue 프레임워크에서는 연결 유지 구성 요소를 사용하여 구성 요소의 성능을 최적화할 수 있습니다. keep-alive는 Vue에서 제공하는 내장 구성 요소입니다. 반복되는 생성 및 삭제를 방지하기 위해 래핑된 구성 요소의 인스턴스를 캐시하여 애플리케이션의 응답 속도를 향상시킬 수 있습니다. 이 기사에서는 연결 유지를 사용하여 구성 요소의 성능을 최적화하는 방법을 소개합니다.

1. keep-alive 구성 요소를 사용하여 캐시해야 하는 구성 요소를 래핑합니다

먼저 캐시해야 하는 구성 요소를 keep-alive 구성 요소로 래핑해야 합니다. 예를 들어 "Dashboard"라는 구성 요소가 있고 다른 페이지로 전환한 후에도 해당 상태를 유지하려는 경우 다음과 같은 방법으로 구성 요소를 래핑할 수 있습니다.

<template>
  <div>
    <keep-alive>
      <dashboard v-if="showDashboard" />
    </keep-alive>
    <button @click="toggleDashboard">Toggle Dashboard</button>
  </div>
</template>

<script>
import Dashboard from './Dashboard.vue';

export default {
  components: {
    Dashboard
  },
  data() {
    return {
      showDashboard: true
    };
  },
  methods: {
    toggleDashboard() {
      this.showDashboard = !this.showDashboard;
    }
  }
};
</script>

대시보드 구성 요소를 연결 유지로 래핑하면 심지어 다른 페이지로 전환했다가 다시 전환하면 대시보드 구성 요소의 상태가 유지됩니다.

2. 활성화 및 비활성화된 후크 기능을 사용하여 상태를 저장하고 삭제하세요

구성 요소가 캐시되면 삭제되지만 언로드되지는 않습니다. 이는 구성요소의 상태가 보존되어 다시 활성화될 때 사용할 수 있음을 의미합니다. Vue는 활성화 및 비활성화된 후크 기능을 제공하며 이 두 가지 후크 기능에서 필요한 작업을 수행할 수 있습니다.

예를 들어, 활성화될 때마다 실행해야 하는 일부 로직이 포함된 "대시보드"라는 구성 요소가 있으며 다음과 같이 활성화 및 비활성화된 후크 기능을 사용할 수 있습니다.

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Dashboard',
      count: 0
    };
  },
  activated() {
    this.title = 'Activated Dashboard';
  },
  deactivated() {
    this.title = 'Dashboard';
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

구성 요소가 활성화될 때마다 활성화된 후크 함수가 호출됩니다. 구성 요소의 데이터를 업데이트하거나 데이터를 다시 요청하는 등 몇 가지 필수 작업을 수행할 수 있습니다. 위의 예에서는 대시보드 구성 요소가 활성화될 때마다 제목이 "활성화된 대시보드"로 업데이트됩니다.

3. 포함 및 제외 속성을 사용하여 캐시된 구성 요소 지정

어떤 경우에는 특정 구성 요소만 캐시하고 싶을 수도 있고 특정 구성 요소를 캐시하고 싶지 않을 수도 있습니다. Vue는 캐시해야 하는 구성 요소와 캐시할 필요가 없는 구성 요소를 지정하는 데 사용할 수 있는 포함 및 제외 속성을 제공합니다.

예를 들어 대시보드와 설정이라는 두 가지 구성 요소가 있고 대시보드 구성 요소는 캐시하고 설정 구성 요소는 캐시하지 않으려면 다음과 같이 코드를 수정할 수 있습니다.

<template>
  <div>
    <keep-alive :include="['dashboard']">
      <dashboard v-if="showDashboard" />
    </keep-alive>
    <settings v-if="showSettings" />
    <button @click="toggleDashboard">Toggle Dashboard</button>
    <button @click="toggleSettings">Toggle Settings</button>
  </div>
</template>

<script>
import Dashboard from './Dashboard.vue';
import Settings from './Settings.vue';

export default {
  components: {
    Dashboard,
    Settings
  },
  data() {
    return {
      showDashboard: true,
      showSettings: true
    };
  },
  methods: {
    toggleDashboard() {
      this.showDashboard = !this.showDashboard;
    },
    toggleSettings() {
      this.showSettings = !this.showSettings;
    }
  }
};
</script>

include 속성을 ['dashboard']로 설정하여 , Vue에 "dashboard"라는 구성 요소만 캐시되고 다른 구성 요소는 캐시되지 않는다고 알려줍니다. 위의 예에서는 대시보드 구성 요소로 전환한 후 다른 페이지로 전환할 때마다 대시보드 구성 요소의 상태가 유지되지만 설정 구성 요소의 상태는 유지되지 않습니다.

요약:

연결 유지 구성 요소를 사용하면 Vue 애플리케이션의 성능을 최적화하고 구성 요소의 반복적인 생성 및 삭제를 방지하며 애플리케이션의 응답 속도를 향상시키는 데 도움이 될 수 있습니다. 캐시해야 하는 구성 요소를 연결 유지에 래핑하고 활성화 및 비활성화된 후크 기능을 사용하여 상태를 저장하고 지우면 구성 요소의 상태를 더 잘 관리할 수 있습니다. 또한 포함 및 제외 속성을 사용하면 캐시해야 하는 구성 요소를 보다 정확하게 지정할 수 있습니다. 이 기사가 연결 유지를 사용하여 Vue에서 구성 요소 성능을 최적화하는 데 도움이 되기를 바랍니다.

위 내용은 연결 유지를 사용하여 Vue에서 구성 요소 성능을 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!