Vue: Saya harap keep-alive dapat meningkatkan fungsi menghapus komponen yang di-cache secara dinamis

Sebenarnya, sebelum menjawab pertanyaan ini sekali di forum, Anda bisa menggunakan keep-alive dari include atau exclude untuk melakukannya.

Untuk menulis Anda contoh sederhana:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

bukankah ini tiruan dari #6259 ?

@posva Ya, situasi serupa. Ini akan menghapus cache keep-alive secara dinamis selama runtime.

@jkzing Terima kasih banyak, metode Anda harus dapat menyelesaikan skenario yang saya sebutkan di atas, tetapi saya masih memiliki skenario, seperti halaman daftar, jika dialihkan dari tab, saya harap tetap hidup, dan dapatkan data langsung dari memori, jika Setelah memodifikasi sepotong data, program melompat ke halaman daftar, berharap mendapatkan data baru di latar belakang.Meskipun saya bisa mendapatkan data baru dari latar belakang setelah halaman selesai, rasanya tidak cukup elegan. Jika ada api di atas, saya hanya perlu mengubahnya setelah modifikasi. Tetap hidup dari router ini dihapus, dan data harus secara otomatis diperoleh dari latar belakang. Saya tidak tahu apakah apa yang saya katakan dapat membuat Anda mengerti. Singkatnya, saya berharap dapat secara elegan membuat aplikasi satu halaman sama dengan efek multi-tab dari iframe sebelumnya: http://www.sucaihuo .com/modals/16/1653/demo / Di atas, terima kasih.

@okjesse Ini juga dapat dilakukan, yang Anda butuhkan hanyalah meningkatkan include atau exclude ke komponen tingkat yang lebih tinggi; atau, jika vuex digunakan, masukkan include toko vuex .

Singkatnya, Vue menyediakan API dasar untuk melakukannya.Jika Anda ingin menggunakannya dengan nyaman, Anda perlu merangkumnya sedikit.

@jkzing mengerti, terima kasih, saya sekarang menulis implementasi keep-alive sendiri, saya akan mencoba mengikuti metode Anda

@jkzing , tetapi bahkan jika ini dapat dicapai, saya pikir lebih baik memiliki api ini, semantiknya akan berbeda, yang saya inginkan adalah menghapus data yang telah tetap hidup, komponen itu sendiri masih hidup, bukan daripada non-stop Apakah sakelar akan hidup

Ini hanya salah satu masalah. Pembukaan halaman baru yang terus-menerus yang kita temui akan menyebabkan terlalu banyak memori, dan akhirnya browser akan membeku. Seharusnya tidak ada hubungannya dengan keepalive.Jika bisa, kita bisa

Apa yang ingin kami capai adalah memutuskan apakah akan menggunakan halaman yang di-cache atau halaman baru sebelum melompat ke halaman.Api lama tidak bisa melakukannya

Saya juga menemukan persyaratan ini. Kemudian saya mengklik daftar menu untuk menghubungkan, menambahkan label di tab dan men-cache komponen yang baru dibuka; mengklik label tutup, saya berharap untuk menghapus komponen yang di-cache; Saya menyebutnya ini.$ in fungsi pengait komponen yang dinonaktifkan. destroy(); Ini dapat menghapus cache, tetapi ditemukan bahwa komponen baru tidak akan di-cache ketika koneksi dibuka di lain waktu

@fadexiii Saya memecahkan metode yang ada, yang dapat dicapai dengan pengaturan dinamis meliputi

@okjesse Keep -alive saya berisi <router-view></router-view> Metode include tidak berfungsi

@okjesse Barusan saya tidak mendefinisikan atribut name dari conponent. Setelah definisi, tidak apa-apa, terima kasih

FYI: diimplementasikan di 2cba6d4cb1db8273ee45cccb8e50ebd87191244e

@fadexiii #6961 Kebutuhan yang sama dengan Anda, bagaimana Anda mengatasinya?

@Jack-93 Gunakan keep-alive include, ketika tag baru dibuka, nama komponen saat ini ditambahkan ke array include, dan nama komponen tag penutup dihapus dari array saat tag ditutup.

Melihat metode $destroy, saya pikir ini adalah penggunaan yang benar, yang menentukan apakah komponen akan di-cache saat meninggalkan halaman melalui perilaku pengguna yang berbeda di dalam komponen.
(Misalnya, komponen pesan, komponen ini harus dimusnahkan setelah pesan berhasil dikirim. Jika tidak dikirim, cache harus disimpan agar pengguna dapat masuk dan melanjutkan di lain waktu.)
Namun, setelah dihancurkan, akses berulang ke komponen ini lagi akan menghasilkan hasil yang aneh, dan komponen tersebut tidak dapat lagi di-cache. Saya pikir ini adalah bug.

@wanyaxing Saya juga mengalami masalah yang sama dengan Anda. Saya menggunakan keep-alive untuk
Dalam hal ini, tidak ada masalah untuk pertama kalinya, dan dapat berjalan normal. Setelah dua kali atau lebih, B akan di-cache beberapa kali. Setiap kali kembali dari D ke B, B baru akan dihasilkan, dan The B yang sebelumnya di-cache masih ada di memori, seperti yang ditunjukkan pada gambar:

Kode inti adalah sebagai berikut:

@realfly08 Saya mencoba mengirimkan PR untuk menyelesaikan masalah ini, tetapi tampaknya pengiriman gagal. Saya tidak menemukan cara untuk melewati tinjauan kode otomatis vue-. -https :

Saya juga mempersiapkan cache seluruh situs sebelumnya, dan kemudian saya menemukan lubang logis dari pembaruan cache.
Sekarang saya menyerahkan seluruh cache situs, hanya menyalakan cache pada halaman formulir utama, dan kemudian secara dinamis menilai dalam kode apakah akan mempertahankan data halaman saat ini, yang merupakan lompatan sementara dari masalah ini, tetapi saya masih merasa bahwa ini logika tidak cukup baik.

@wanyaxing Saya juga mengalami masalah serupa. Fungsi logis yang akan diterapkan adalah halaman A->B->C 3. Cache digunakan saat kembali, dan dirender ulang saat masuk lagi. Saat ini, setiap halaman tetap hidup , dan kemudian saya membuat penilaian di halaman B. Jika ingin kembali ke halaman sebelumnya (pergi -1), hancurkan komponen saat ini di nonaktifkan dan panggil $destroy. Ketika Anda memasuki halaman C lagi secara berurutan, kembali ke halaman B , Anda dapat melihat bahwa itu adalah halaman B yang dibuat ulang, ada halaman B di cache pada saat yang sama

https://www.jianshu.com/p/cd1baf5b03b0
Saya menyusun ini

@fadexiii tetap hidup bagaimana cara menggunakan dengan tampilan router?

  <keep-alive :include="includes">
     <router-view></router-view>
  </keep-alive>

termasuk menulis nama dalam konfigurasi perutean: 'login'

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    }]
 })

Mengapa saya menetapkan include ke string kosong, dan itu masih bisa di-cache?Persyaratan saya adalah menghancurkan rute yang di-cache secara manual

Setelah komponen dihancurkan, cache tidak dikosongkan, saya pikir masalahnya ada di sini.
Penanggung jawab proyek merekomendasikan penggunaan atribut seperti include untuk pemrosesan. Saya tidak berpikir itu langsung dihancurkan. Memori dapat ditingkatkan.

@wanyaxing membaca PR yang Anda kirimkan, itu harus valid, atau buka API hapus cache, bukan?

@ leixu2txtek Saya telah melepaskan PR itu. Dengan mengosongkan cache secara paksa, saya menyadari fungsi menghapus komponen cache yang menyamar secara dinamis.

Saat ini saya menggunakan caching di seluruh situs, dan menerapkan fungsi menghapus cache berdasarkan logika bisnis dengan mencegat acara perutean dari halaman yang keluar. Cuplikan kode berikut adalah untuk referensi:

• Letakkan tampilan router di keep-alive, dan seluruh situs akan menggunakan cache secara default.
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• Saya melapisi semua halaman di rute. Misalnya, meta.rank mewakili tingkat halaman, seperti 1,5>2,5>3,5 berarti memasuki lapisan kedua dari lapisan pertama ke lapisan ketiga.

routes: [
{   path: '/', redirect:'/yingshou', },
{   path: '/yingshou',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/contract_list',           meta:{rank:1.5,isShowFooter:true},          },
{   path: '/customer',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/wode',                    meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu',                  meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu/pact_list',        meta:{rank:2.5},                            },
{   path: '/yingfu/pact_detail',      meta:{rank:3.5},                            },
{   path: '/yingfu/expend_view',      meta:{rank:4.5},                            },
{   path: '/yingfu/jizhichu',         meta:{rank:5.5},                            },
{   path: '/yingfu/select_pact',      meta:{rank:6.5},                            },
{   path: '/yingfu/jiyingfu',         meta:{rank:7.5},                            },
]

• Karena semua halaman di-cache, ide intinya adalah [Kapan cache akan dimusnahkan? ]. Desain saya adalah: cache halaman saat ini akan disimpan ketika beralih ke halaman berikutnya pada tingkat yang sama, dan [cache halaman saat ini akan dihancurkan ketika kembali ke halaman sebelumnya].
• Jadi di main.js, saya menggunakan metode Vue.mixin untuk mencegat acara meninggalkan rute, dan menerapkan fungsi menghancurkan cache halaman dalam metode intersepsi. Kode inti adalah sebagai berikut:

Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {//如果返回上一层，则摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
});

Ringkasan: Sebenarnya, melalui komponen keepAlive tingkat atas di mana komponen halaman berada, daftar cache di objek dimanipulasi dengan kejam. . .

Sederhana dan lugas, meski tidak terlalu elegan, mudah digunakan, haha ​​:)

Tentu saja, saya masih berharap API dukungan resmi akan lebih baik.

@wanyaxing Saya mengontrol caching halaman melalui perutean

Sebagai contoh, saya memiliki /executed/ dan anaknya route /executed/chart/. Saya juga menggunakan metode mixin untuk meretas untuk menghancurkan komponen yang tidak perlu di-cache ketika rute pergi. Yang ingin saya lakukan adalah merutekan dari induk ke subset. Orang tua di-cache, dan kondisi lainnya dihancurkan, jadi kita hanya perlu mengontrol perutean, tanpa menambahkan atribut apa pun, saya malas;

// 支持页面保持
Vue.mixin({
  beforeRouteLeave(to, from, next) {

    if (!to.path.startsWith(from.path)) this.$destroy();

    next();

  }
});

Terima kasih @wanyaxing , kode Anda sangat berguna bagi saya. Biarkan saya merujuk ke

Saya menemukan bahwa cache tidak dihancurkan.Cobalah yang terbaik untuk berkomunikasi dengan @LinusBorg

@wanyaxing Saya telah mencari cara untuk mendapatkan cache, tidak terbiasa dengan kode inti vue, kode Anda lebih berguna, saya lulus tes, sangat bagus, untuk sementara lakukan ini, saya harap pejabat dapat menyelesaikan masalah ini, Saya bertanya apakah Beberapa orang telah memeriksa banyak informasi, dan ada masalah semacam ini atau itu

Ha ha.
Atas dasar ini, @leixu2txtek merekomendasikan Anda sebuah plug-in, dikombinasikan dengan https://github.com/wanyaxing/vue-router-then , efeknya lebih baik.
Gunakan vue-router-then untuk membuka subhalaman di halaman saat ini, dan Anda bisa mendapatkan informasi atau kejadian dari subhalaman di halaman saat ini.
this.$routerThen.push('/chose').then(vm => {})

Untuk memberikan contoh yang paling umum digunakan, misalnya, saat mengisi halaman pesanan, Anda perlu membuka daftar alamat untuk seleksi.

<input v-model="price" v-model-link="'/select_address'" />

Kemudian di rute yang dibuka oleh /select_address, setelah memilih alamat, picu event input dan kembali ke halaman.

<script>
methods:{
    clickSomeOne:function(value){
        this.$emit('input',value);
        this.$router.go(-1);
    },
}
</script>

Ini membutuhkan interaksi langsung antara perutean induk dan anak berdasarkan strategi caching yang disebutkan di atas. Namun, itu akan sangat menarik setelah implementasi. Ide pengembangannya sangat intuitif. Anda tidak perlu mempertimbangkan untuk menyimpan data sementara di vuex , buka saja halaman untuk mendapatkan datanya.

@fadexiii Maksud Anda jika Anda menggunakan router, apakah harus menyertakan nama dalam komponen yang sesuai dengan router?
---- router.js ----

import ComponentA from 'views/a
export default [
  {path: 'a', component: ComponentA, name: a}
]

---- dilihat/a.vue ----

export default {
  name: 'xxxa'
}

Apa yang harus disimpan dalam include adalah ComponentA atau a atau xxxa?

@yiwuyu xxxa

@jkzing Bagaimana jika saya memuat komponen yang sama dua kali, yang satu perlu di-cache, dan yang lainnya tidak perlu di-cache? Nama komponennya sama.

Saya juga mengalami masalah ini
meta: {
keepAlive: true // perlu di-cache
}
Setel ke salah saat klik tutup
Kemudian ubah pendengar menjadi true
Lihat https://mp.csdn.net/postedit/82628953 untuk detailnya. Sekarang tes tidak masalah. Saya tidak tahu apakah akan ada masalah nanti.

Ketika tab dialihkan, cache ditutup dan cache dihancurkan dan saat berikutnya dibuka dan dimuat ulang dengan beberapa halaman sub-perutean bersarang, hal yang sama berlaku.

Sebenarnya, sebelum menjawab pertanyaan ini sekali di forum, Anda bisa menggunakan keep-alive dari include atau exclude untuk melakukannya.

Untuk menulis Anda contoh sederhana:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

Saya mengerti contoh ini. Saya ingin bertanya kepada para dewa di sini. Bisnis saya seperti ini. Sisi kiri adalah tab vertikal. Tab ini dapat ditambahkan atau dihapus secara dinamis oleh pengguna. Klik salah satu tab, dan sisi kanan menampilkan tab yang sesuai dengan tab ini Sebuah pohon sebenarnya adalah pohon yang sama, tetapi simpul yang dipilih oleh pohon tersebut berbeda. Ide awalnya adalah menambahkan item tab, menambahkan pohon di sisi kanan, ketika berpindah tab, pohon akan disembunyikan dan ditampilkan sesuai (v-show), tetapi ketika ada lebih banyak tab, akan ada banyak pohon di sisi kanan, dan node dom terlalu Banyak. Jika Anda tidak perlu menyembunyikan tampilan dan menggunakan v-if, akan ada status pohon (dipilih, diperluas, digulir) yang tidak dapat disimpan, jadi saya pikir nanti dari keep-alive, yang bisa menyelamatkan negara. Tapi saya adalah komponen file tunggal dari vue. Tab ada di halaman utama. Pohon adalah komponen yang diimpor. Setelah impor masuk, itu langsung terdaftar di properti komponen. Bagaimana saya bisa membuat banyak nama untuk pohon seperti yang Anda posting?? Tapi nyatanya, saya hanyalah sebuah komponen. Saya membuat nama hanya untuk mengaitkan dengan tab kiri. Lebih tepatnya, untuk menghapus item tab di sisi kiri, juga menghapus buffer pohon yang sesuai dengan item tab ini di keepalive? Tapi apa yang harus kita lakukan?

@ leixu2txtek Saya telah melepaskan PR itu. Dengan mengosongkan cache secara paksa, saya menyadari fungsi menghapus komponen cache yang menyamar secara dinamis.

Saat ini saya menggunakan caching di seluruh situs, dan menerapkan fungsi menghapus cache berdasarkan logika bisnis dengan mencegat acara perutean dari halaman yang keluar. Cuplikan kode berikut adalah untuk referensi:

• Letakkan tampilan router di keep-alive, dan seluruh situs akan menggunakan cache secara default.
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• Saya melapisi semua halaman di rute. Misalnya, meta.rank mewakili tingkat halaman, seperti 1,5>2,5>3,5 berarti memasuki lapisan kedua dari lapisan pertama ke lapisan ketiga.

routes: [
{   path: '/', redirect:'/yingshou', },
{   path: '/yingshou',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/contract_list',           meta:{rank:1.5,isShowFooter:true},          },
{   path: '/customer',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/wode',                    meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu',                  meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu/pact_list',        meta:{rank:2.5},                            },
{   path: '/yingfu/pact_detail',      meta:{rank:3.5},                            },
{   path: '/yingfu/expend_view',      meta:{rank:4.5},                            },
{   path: '/yingfu/jizhichu',         meta:{rank:5.5},                            },
{   path: '/yingfu/select_pact',      meta:{rank:6.5},                            },
{   path: '/yingfu/jiyingfu',         meta:{rank:7.5},                            },
]

• Karena semua halaman di-cache, ide intinya adalah [Kapan cache akan dimusnahkan? ]. Desain saya adalah: cache halaman saat ini akan disimpan ketika beralih ke halaman berikutnya pada tingkat yang sama, dan [cache halaman saat ini akan dihancurkan ketika kembali ke halaman sebelumnya].
• Jadi di main.js, saya menggunakan metode Vue.mixin untuk mencegat acara meninggalkan rute, dan menerapkan fungsi menghancurkan cache halaman dalam metode intersepsi. Kode inti adalah sebagai berikut:

Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {//如果返回上一层，则摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
});

Ringkasan: Sebenarnya, melalui komponen keepAlive tingkat atas di mana komponen halaman berada, daftar cache di objek dimanipulasi dengan kejam. . .

Sederhana dan lugas, meski tidak terlalu elegan, mudah digunakan, haha ​​:)

Tentu saja, saya masih berharap API dukungan resmi akan lebih baik.

Tapi dengan cara ini memori tidak akan dilepaskan. Saya mematikan keepalive dan itu akan baik-baik saja. Menambahkan keepalive dan kemudian menghapus cache secara manual dan menghancurkan memori masih meningkat. Saya ingin tahu apakah Anda telah memperhatikan aspek ini?

@Liudapeng Saya belum mempelajari penggunaan memori dengan cermat sebelumnya. Saya melakukan tes kasar, dan saya tidak mempelajarinya dengan cermat setelah melihat penurunan memori di timeline grafik memori.

Saya agak sibuk akhir-akhir ini. Saya melihat pesan Anda dua hari yang lalu dan saya belum sempat membalas Anda.

Saya baru saja melakukan tes lain, diulang beberapa kali untuk masuk jauh ke dalam lima atau enam tingkat halaman dan kemudian kembali ke halaman rumah.Hasil dari timeline memori adalah sebagai berikut:

• Nyalakan keep-alive, dan hancurkan komponen secara dinamis (yaitu, gunakan metode yang saya sebutkan di atas):
  > Anda dapat dengan jelas melihat penurunan memori di timeline Saya pikir memori hancur.
  

Jangan gunakan keep-alive:

Karena tidak ada keepalive, tumpukan memori tidak akan terlalu cepat, tetapi masih semakin tinggi (mungkin kode saya diubah terburu-buru, dan ada kebocoran memori di tempat lain)

Namun secara umum, menurut saya setelah menggunakan dynamic Destruction, penggunaan memori masih dalam kisaran yang dapat diterima, jadi jika Anda mengalami peningkatan memori yang signifikan, Anda harus memeriksa apakah binding event tidak dimusnahkan saat komponen dimusnahkan (menyebabkan Meskipun komponen dihapus dari array cache keepAlive, tidak dihancurkan dari memori).

Silakan periksa lagi.

@wanyaxing saya memiliki masalah yang sama di proyek saya，tanpa tetap hidup：

Panggil $destory() dari komponen dinamis tidak berfungsi, dan saya menemukan bahwa tumpukan JS semakin tinggi dengan jumlah Node. Tampaknya komponen dinamis membuat DOM tanpa merusaknya.

@bigggge name adalah atribut di dalam komponen, bukan atribut rute

Pertanyaan saya lebih aneh lagi. Versi vue saya adalah 2.3.3. Halaman A memiliki kode untuk menggulir untuk memuat halaman berikutnya. Saya beralih dari halaman A ke halaman B. Ketika halaman B digulir, saya menemukan bahwa kode untuk halaman A untuk memuat halaman berikutnya akan tetap dieksekusi. Ketika saya menghapus global keep-alive, masalah di atas tidak akan terjadi. Tapi semua aktivasi saya tidak valid lagi, saya harus menggunakan yang dibuat.

Pertanyaan saya lebih aneh lagi. Versi vue saya adalah 2.3.3. Halaman A memiliki kode untuk menggulir untuk memuat halaman berikutnya. Saya beralih dari halaman A ke halaman B. Ketika halaman B digulir, saya menemukan bahwa kode untuk halaman A untuk memuat halaman berikutnya akan tetap dieksekusi. Ketika saya menghapus global keep-alive, masalah di atas tidak akan terjadi. Tapi semua aktivasi saya tidak valid lagi, saya harus menggunakan yang dibuat.

Ini mungkin disebabkan oleh pemantauan global, Anda dapat menilai apakah itu rute saat ini saat menggulir, dan kemudian memutuskan apakah akan memuat halaman berikutnya

Pertanyaan saya lebih aneh lagi. Versi vue saya adalah 2.3.3. Halaman A memiliki kode untuk menggulir untuk memuat halaman berikutnya. Saya beralih dari halaman A ke halaman B. Ketika halaman B digulir, saya menemukan bahwa kode untuk halaman A untuk memuat halaman berikutnya akan tetap dieksekusi. Ketika saya menghapus global keep-alive, masalah di atas tidak akan terjadi. Tapi semua aktivasi saya tidak valid lagi, saya harus menggunakan yang dibuat.

Ini mungkin disebabkan oleh pemantauan global, Anda dapat menilai apakah itu rute saat ini saat menggulir, dan kemudian memutuskan apakah akan memuat halaman berikutnya

Ya, saya menggunakan plug-in vue-infinite-scroll. Ketika saya menggunakan keep-alive global, itu tidak menghapus acara pemantauan. Saya telah menulis ulang plug-in ini.

Saya menggunakan skrip @wanyaxing untuk mencapai fungsi membersihkan cache, dan dengan antrian lompatan rekor, lebih mudah untuk menangani persyaratan rollback dan tidak menyegarkan.Script diatur dan diletakkan pada intinya
https://Gist.github.com/lingceng/c204bac2704d03db99932d5457e662e6

@jkzing Bagaimana jika saya memuat komponen yang sama dua kali, yang satu perlu di-cache, dan yang lainnya tidak perlu di-cache? Nama komponennya sama.

Saya juga memiliki pertanyaan ini. Sertakan tidak dapat memenuhi persyaratan ini. Jika beberapa halaman perutean sesuai dengan satu komponen, maka hanya ada satu nama komponen. Apa yang harus saya lakukan?

Ketika tab dialihkan, cache ditutup dan cache dihancurkan dan saat berikutnya dibuka dan dimuat ulang dengan beberapa halaman sub-perutean bersarang, hal yang sama berlaku.

@heng1234Halo, sudahkah Anda memecahkan masalah ini? Siapa yang dapat meninggalkan informasi kontak untuk panduan?

Jangan berpindah halaman dengan merutekan dan beralih berdasarkan komponen
https://blog.csdn.net/qq_39313596/article/details/82628953

[email protected]

Dari: Codezero123
Waktu pengiriman: 2019-12-03 10:04
Penerima: vuejs/vue
Cc: hlvy; Sebutkan
Subjek: Re: [vuejs/vue] Saya harap keep-alive dapat meningkatkan fungsi penghapusan komponen cache secara dinamis (#6509)
Ketika tab dialihkan, cache ditutup dan cache dihancurkan dan saat berikutnya dibuka dan dimuat ulang dengan beberapa halaman sub-perutean bersarang, hal yang sama berlaku.
@heng1234Halo, sudahkah Anda memecahkan
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub, atau berhenti berlangganan.

@wanyaxing Anda tidak efektif untuk cache perutean tiga tingkat. Misalnya, di vue-element-admin, ketika beberapa tag tag tiga tingkat diaktifkan, mengganti tag tag tidak akan menghancurkan komponen cache, tetapi hanya membuka sepertiga tag tag perutean -level. , Dapat dihancurkan. Misalnya, aktifkan menu1-0 dan menu1-1 berikut.
rute.
{ path: '/nested', component: Layout, redirect: '/nested/menu1/menu1-1', name: 'Nested', meta: { title: 'Nested Routes', icon: 'nested' }, children: [ { path: 'menu1', component: () => import('@/views/nested/menu1/index'), // Parent router-view name: 'Menu1', meta: { title: 'Menu 1' }, redirect: '/nested/menu1/menu1-1', children: [ { path: 'menu1-0', component: () => import('@/views/nested/menu1/menu1-0'), name: 'Menu1-0', meta: { title: 'Menu 1-0', noCache: true } }, { path: 'menu1-1', component: () => import('@/views/nested/menu1/menu1-1'), name: 'Menu1-1', meta: { title: 'Menu 1-1' } }, { path: 'menu1-2', component: () => import('@/views/nested/menu1/menu1-2'), name: 'Menu1-2', redirect: '/nested/menu1/menu1-2/menu1-2-1', meta: { title: 'Menu 1-2' }, children: [ { path: 'menu1-2-1', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), name: 'Menu1-2-1', meta: { title: 'Menu 1-2-1' } }, { path: 'menu1-2-2', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), name: 'Menu1-2-2', meta: { title: 'Menu 1-2-2' } } ] }, { path: 'menu1-3', component: () => import('@/views/nested/menu1/menu1-3'), name: 'Menu1-3', meta: { title: 'Menu 1-3' } } ] } ] }

`Vue.mixin({
beforeR outeLeave:function (ke, dari, selanjutnya){
if (dari.meta.noCache) {
if (this.$vnode && this.$vnode.data.keepAlive) {
if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {

      if (this.$vnode.componentOptions) {
        var key = this.$vnode.key == null
          ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
          : this.$vnode.key;
        var cache = this.$vnode.parent.componentInstance.cache;
        var keys = this.$vnode.parent.componentInstance.keys;
        if (cache[key]) {
          if (keys.length) {
            var index = keys.indexOf(key);
            if (index > -1) {
              keys.splice(index, 1);
            }
          }
          delete cache[key];
        }
      }
    }
    this.$destroy();
  }
}
next();

},
});`

Idenya adalah ide semacam ini. Tidak ada masalah dengan ide tersebut. Kapan harus memanggil dan menghancurkan cache, itu tergantung pada implementasi spesifik dalam bisnis Anda.

Skenario semacam ini di sisi bisnis kita seharusnya sangat skenario:
1. Saya telah menelusuri beberapa halaman dan perlu di-cache
2. Klik untuk keluar, Anda perlu menghapus semua cache
3. Ada petunjuk pengalihan kesalahan lain setelah login, halaman ini tidak di-cache
4. Login berhasil, dan halaman baru terus di-cache

Sekarang saya menemukan bahwa tidak mungkin untuk menghapus semua cache ketika mencapai 2. Menempatkan nilai maksimal keep-alive di vuex dan menyetelnya ke 1 masih tidak valid, tergantung pada alat pengembang vue, masih ada halaman yang di-cache.
Yang lebih aneh lagi bagi saya adalah bahwa melompat ke halaman non-login lain di 3 akan memicu pemasangan halaman yang di-cache di 1, dan melihat alat pengembang, semua halaman ini tidak aktif. Hei, ini mengarah ke logika halaman yang berbeda. Baik dari masalah.
Setelah lama mencari, saya masih tidak tahu mengapa

Skenario semacam ini di sisi bisnis kita seharusnya sangat skenario:
1. Saya telah menelusuri beberapa halaman dan perlu di-cache
2. Klik untuk keluar, Anda perlu menghapus semua cache
3. Ada petunjuk pengalihan kesalahan lain setelah login, halaman ini tidak di-cache
4. Login berhasil, dan halaman baru terus di-cache

Sekarang saya menemukan bahwa tidak mungkin untuk menghapus semua cache ketika mencapai 2. Menempatkan nilai maksimal keep-alive di vuex dan menyetelnya ke 1 masih tidak valid, tergantung pada alat pengembang vue, masih ada halaman yang di-cache.
Yang lebih aneh lagi bagi saya adalah bahwa melompat ke halaman non-login lain di 3 akan memicu pemasangan halaman yang di-cache di 1, dan melihat alat pengembang, semua halaman ini tidak aktif. Hei, ini mengarah ke logika halaman yang berbeda. Baik dari masalah.
Setelah lama mencari, saya masih tidak tahu mengapa

Dalam skenario Anda, pada saat 2, Anda harus mempertimbangkan untuk menyegarkan halaman secara langsung, yang merupakan solusi teraman dan paling langsung.

Karena include sesuai dengan nama komponen, bagaimana jika beberapa rute sesuai dengan satu komponen? Apakah ada cara untuk memberi nama yang berbeda untuk komponen yang sama?