Cara menggunakan keep-alive untuk mengoptimumkan prestasi komponen dalam Vue

Cara menggunakan keep-alive untuk mengoptimumkan prestasi komponen dalam Vue

Apabila aplikasi web menjadi lebih kompleks, pengoptimuman prestasi bahagian hadapan menjadi semakin penting. Dalam rangka kerja Vue, kami boleh mengoptimumkan prestasi komponen dengan menggunakan komponen keep-alive. keep-alive ialah komponen terbina dalam yang disediakan oleh Vue Ia boleh menyimpan contoh komponen yang dibalut untuk mengelakkan penciptaan dan pemusnahan berulang, sekali gus meningkatkan kelajuan tindak balas aplikasi. Dalam artikel ini, kami akan memperkenalkan cara menggunakan keep-alive untuk mengoptimumkan prestasi komponen.

1. Gunakan keep-alive untuk membalut komponen yang perlu dicache

Pertama, kita perlu membalut komponen yang perlu dicache dalam komponen keep-alive. Sebagai contoh, kami mempunyai komponen bernama "Papan Pemuka", dan kami ingin mengekalkan keadaannya selepas bertukar ke halaman lain, maka kami boleh membungkus komponen itu dengan cara berikut:

<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>

Dengan membungkus komponen Papan Pemuka dalam keep-alive, Even jika kita beralih ke halaman lain dan kemudian bertukar kembali, keadaan komponen Papan Pemuka akan dikekalkan.

2. Gunakan fungsi cangkuk yang diaktifkan dan dinyahaktifkan untuk menyimpan dan mengosongkan keadaan

Apabila komponen dicache, ia akan dimusnahkan, tetapi tidak akan dipunggah. Ini bermakna keadaan komponen akan dipelihara dan tersedia apabila diaktifkan semula. Vue menyediakan fungsi cangkuk yang diaktifkan dan dinyahaktifkan, dan kami boleh melaksanakan operasi yang diperlukan dalam dua fungsi cangkuk ini.

Sebagai contoh, kita mempunyai komponen yang dipanggil "Dashboard" yang mengandungi beberapa logik yang perlu dilaksanakan setiap kali ia diaktifkan, kita boleh menggunakan fungsi cangkuk yang diaktifkan dan dinyahaktifkan seperti berikut:

<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>

Setiap kali komponen itu diaktifkan, The fungsi cangkuk yang diaktifkan akan dipanggil. Kami boleh melakukan beberapa operasi yang diperlukan di dalamnya, seperti mengemas kini data komponen atau meminta semula data. Dalam contoh di atas, setiap kali komponen Papan Pemuka diaktifkan, tajuk akan dikemas kini kepada "Papan Pemuka Diaktifkan".

3. Tentukan komponen cache menggunakan termasuk dan kecualikan atribut

Dalam sesetengah kes, kami mungkin hanya mahu cache komponen tertentu, atau kami mungkin tidak mahu cache komponen tertentu. Vue menyediakan atribut sertakan dan tidak termasuk, yang boleh kami gunakan untuk menentukan komponen yang perlu dicache dan komponen yang tidak perlu dicache.

Sebagai contoh, kami mempunyai dua komponen: Papan Pemuka dan Tetapan, dan kami mahu cache komponen Papan Pemuka tetapi bukan komponen Tetapan, kami boleh mengubah suai kod seperti berikut:

<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>

Dengan menetapkan atribut include kepada ['dashboard'] , kami memberitahu Vue Hanya komponen bernama "papan pemuka" dicache dan tiada komponen lain dicache. Dalam contoh di atas, setiap kali anda bertukar kepada komponen Papan Pemuka dan kemudian beralih ke halaman lain, keadaan komponen Papan Pemuka akan dikekalkan, tetapi keadaan komponen Tetapan tidak akan dikekalkan.

Ringkasan:

Menggunakan komponen keep-alive boleh membantu kami mengoptimumkan prestasi aplikasi Vue, mengelakkan penciptaan berulang dan pemusnahan komponen, dan meningkatkan kelajuan tindak balas aplikasi. Dengan membungkus komponen yang perlu dicache dalam keep-alive dan menggunakan fungsi cangkuk yang diaktifkan dan dinyahaktifkan untuk menyimpan dan mengosongkan keadaan, kami boleh mengurus keadaan komponen dengan lebih baik. Selain itu, dengan menggunakan atribut include dan exclude, kami boleh menentukan dengan lebih tepat komponen yang perlu dicache. Saya harap artikel ini akan membantu anda menggunakan keep-alive untuk mengoptimumkan prestasi komponen dalam Vue!

Atas ialah kandungan terperinci Cara menggunakan keep-alive untuk mengoptimumkan prestasi komponen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!