Vue: मुझे आशा है कि जीवित रहने से कैश्ड घटकों को गतिशील रूप से हटाने का कार्य बढ़ सकता है

दरअसल, फोरम में एक बार इस सवाल का जवाब देने से पहले आप keep-alive का include या exclude का इस्तेमाल कर सकते हैं।

आपको एक सरल उदाहरण लिखने के लिए:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

क्या यह #6259 का ढोंग नहीं है?

@posva हाँ, ऐसी ही स्थिति। यह रनटाइम के दौरान keep-alive कैश को गतिशील रूप से साफ़ करने वाला है।

@jkzing बहुत-बहुत धन्यवाद, आपकी विधि ऊपर बताए गए परिदृश्य को पूरा करने में सक्षम होनी चाहिए, लेकिन मेरे पास अभी भी एक परिदृश्य है, जैसे कि एक सूची पृष्ठ, यदि इसे टैब से स्विच किया जाता है, तो मुझे आशा है कि यह जीवित है, और प्राप्त करें डेटा सीधे मेमोरी से, यदि डेटा के एक टुकड़े को संशोधित करने के बाद, प्रोग्राम सूची पृष्ठ पर कूदता है, पृष्ठभूमि में नया डेटा प्राप्त करने की उम्मीद करता है। हालांकि पेज पूरा होने के बाद मैं पृष्ठभूमि से नया डेटा प्राप्त कर सकता हूं, ऐसा लगता है पर्याप्त सुरुचिपूर्ण नहीं है। यदि उपरोक्त एपीआई है, तो मुझे केवल संशोधन के बाद इसे बदलने की आवश्यकता है। इस राउटर के जीवित रहने को मंजूरी दे दी गई है, और डेटा स्वचालित रूप से पृष्ठभूमि से प्राप्त किया जाना चाहिए। मुझे नहीं पता कि मैंने जो कहा है वह आपको समझ सकता है या नहीं। संक्षेप में, मुझे उम्मीद है कि मैं सिंगल-पेज एप्लिकेशन को पिछले आईफ्रेम के मल्टी-टैब प्रभाव के समान सुरुचिपूर्ण ढंग से बनाने में सक्षम हूं: http://www.sucaihuo .com/modals/16/1653/demo / ऊपर, धन्यवाद।

@okjesse यह भी किया जा सकता है, आपको केवल include या exclude को उच्च-स्तरीय घटकों में अपग्रेड करना है; या, यदि vuex का उपयोग किया जाता है, तो include vuex store

संक्षेप में, Vue इसे पूरा करने के लिए एक बुनियादी API प्रदान करता है। यदि आप इसे आसानी से उपयोग करना चाहते हैं, तो आपको इसे थोड़ा इनकैप्सुलेट करना होगा।

@jkzing समझते हैं, धन्यवाद, मैं अब अपने आप से एक जीवित कार्यान्वयन लिख रहा हूं, मैं आपके तरीके का पालन करने की कोशिश करूंगा

@jkzing , लेकिन अगर यह हासिल किया जा सकता है, तो मुझे लगता है कि यह एपीआई होना बेहतर है, अर्थशास्त्र अलग होगा, मैं जो चाहता हूं वह डेटा को साफ़ करना है जिसे जीवित रखा गया है, घटक स्वयं अभी भी जीवित है, बल्कि नॉन-स्टॉप की तुलना में क्या स्विच जीवित रहेगा

यह सिर्फ एक समस्या है। हमारे सामने आने वाले नए पेजों के लगातार खुलने से बहुत अधिक मेमोरी हो जाएगी, और अंत में ब्राउज़र फ्रीज हो जाएगा। इसका कीपलाइव से कोई लेना-देना नहीं होना चाहिए।यदि हम कर सकते हैं, पुन: पेश कर सकते हैं

हम जो हासिल करना चाहते हैं वह यह तय करना है कि कैश्ड पेज का उपयोग करना है या पेज पर जाने से ठीक पहले एक नया पेज।पुराना एपीआई यह नहीं कर सकता

मुझे इस आवश्यकता का भी सामना करना पड़ा है। फिर मैंने कनेक्ट करने के लिए मेनू सूची पर क्लिक किया, टैब में एक लेबल जोड़ा और नए खुले घटक को कैश किया; क्लोज लेबल पर क्लिक किया, मुझे कैश्ड घटक को हटाने की उम्मीद है; मैंने इसे कॉल किया। $ में घटक का निष्क्रिय हुक फ़ंक्शन। नष्ट (); यह कैश को साफ़ कर सकता है, लेकिन यह पाया जाता है कि अगली बार कनेक्शन खोले जाने पर नया घटक कैश नहीं किया जाएगा

@fadexiii मैंने मौजूदा विधि को हल किया, जिसे गतिशील रूप से सेटिंग द्वारा प्राप्त किया जा सकता है

@okjesse मेरे जीवित रहने में <router-view></router-view> शामिल है इसमें शामिल विधि काम नहीं करती है

@okjesse अभी मैंने

FYI करें: 2cba6d4cb1db8273ee45cccb8e50ebd87191244e में लागू

@fadexiii #6961 आपकी जैसी ही जरूरत है, आप इसे कैसे हल करते हैं?

@ जैक-९३ का उपयोग जिंदा रखें, जब कोई नया टैग खोला जाता है, तो वर्तमान घटक नाम शामिल सरणी में जोड़ा जाता है, और टैग बंद होने पर समापन टैग का घटक नाम सरणी से हटा दिया जाता है।

$destroy की विधि को देखकर, मुझे लगता है कि यह सही उपयोग है, जो यह निर्धारित करता है कि घटक में विभिन्न उपयोगकर्ता व्यवहारों के माध्यम से पृष्ठ छोड़ते समय घटक को कैश करना है या नहीं।
(उदाहरण के लिए, एक संदेश घटक, संदेश सफलतापूर्वक सबमिट होने के बाद इस घटक को नष्ट कर दिया जाना चाहिए। यदि इसे सबमिट नहीं किया गया है, तो उपयोगकर्ता को अगली बार आने और जारी रखने के लिए कैश रखा जाना चाहिए।)
हालांकि, नष्ट करने के बाद, इस घटक तक पहुंच को फिर से दोहराना अजीब परिणाम देगा, और घटक को अब कैश नहीं किया जा सकता है। मुझे लगता है कि यह एक बग है।

@wanyaxing मुझे भी आपके साथ इसी तरह की समस्या का सामना करना पड़ा। मैंने सभी उप-
इस मामले में, पहली बार कोई समस्या नहीं है, और यह सामान्य रूप से चल सकता है। दो या अधिक बार के बाद, बी को कई बार कैश किया जाएगा। हर बार जब यह डी से बी में वापस आता है, तो एक नया बी उत्पन्न होगा, और पहले कैश्ड B अभी भी मेमोरी में है, जैसा कि चित्र में दिखाया गया है:

कोर कोड इस प्रकार है:

@ realfly08 मैंने इस समस्या को हल करने के लिए एक पीआर जमा करने की कोशिश की, लेकिन ऐसा लगता है कि सबमिशन विफल हो गया। मुझे समझ में नहीं आया कि vue की स्वचालित कोड समीक्षा को कैसे पास किया जाए। -https :

मैं पहले भी साइट-वाइड कैश की तैयारी कर रहा था, और फिर मुझे कैशे अपडेट के तार्किक गड्ढे का सामना करना पड़ा।
अब मैंने पूरी साइट कैश को छोड़ दिया, केवल कुंजी प्रपत्र पृष्ठों पर कैश चालू किया, और फिर कोड में गतिशील रूप से निर्णय लिया कि क्या वर्तमान पृष्ठ डेटा को बनाए रखना है, जो इन समस्याओं का एक अस्थायी स्किप है, लेकिन मुझे अभी भी लगता है कि यह तर्क पर्याप्त नहीं है।

@wanyaxing मुझे भी इसी तरह की समस्या का सामना करना पड़ा। लागू किया जाने वाला तार्किक कार्य A->B->C 3 पृष्ठ है। कैश का उपयोग वापस आने पर किया जाता है, और इसे फिर से दर्ज करते समय फिर से प्रस्तुत किया जाता है। वर्तमान में, प्रत्येक पृष्ठ को जीवित रखा जाता है , और फिर मैं पृष्ठ बी पर निर्णय लेता हूं। यदि यह पिछले पृष्ठ पर वापस जाना है (गो -1), निष्क्रिय में वर्तमान घटक को नष्ट करें और $destroy पर कॉल करें। जब आप क्रम में पृष्ठ सी फिर से दर्ज करते हैं, तो पृष्ठ बी पर वापस आएं , आप देख सकते हैं कि यह बी पेज को फिर से बनाया गया है, उसी समय कैश में एक बी पेज है

https://www.jianshu.com/p/cd1baf5b03b0
मैंने इसे संकलित किया

@fadexiii जीवित रहें राउटर-व्यू के साथ कैसे उपयोग करें?

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

रूटिंग कॉन्फ़िगरेशन में नाम लिखना शामिल है: 'लॉगिन'

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

मैं एक खाली स्ट्रिंग में शामिल क्यों असाइन करूं, और इसे अभी भी कैश किया जा सकता है?मेरी आवश्यकता कैश्ड रूट को मैन्युअल रूप से नष्ट करना है

घटक नष्ट होने के बाद, कैश खाली नहीं होता है। मुझे लगता है कि समस्या यहाँ है।
परियोजना के प्रभारी व्यक्ति प्रसंस्करण के लिए शामिल जैसे विशेषताओं के उपयोग की सिफारिश करते हैं। मुझे नहीं लगता कि यह सीधे नष्ट हो गया है। स्मृति में सुधार किया जा सकता है।

@wanyaxing ने आपके द्वारा सबमिट किए गए पीआर को पढ़ा, यह मान्य होना चाहिए, या एक निकालें कैश एपीआई खोलें, है ना?

@ leixu2txtek मैंने उस पीआर को छोड़ दिया है। कैश को जबरन साफ़ करके, मुझे भेस में कैशे घटक को गतिशील रूप से हटाने के कार्य का एहसास हुआ है।

मैं वर्तमान में पूरी साइट पर कैशिंग का उपयोग करता हूं, और पृष्ठ छोड़ने की रूटिंग घटना को रोककर व्यावसायिक तर्क के आधार पर कैश को हटाने के कार्य को कार्यान्वित करता हूं। निम्नलिखित कोड स्निपेट संदर्भ के लिए हैं:

• राउटर-व्यू को कीप-अलाइव में रखें, और पूरी साइट डिफ़ॉल्ट रूप से कैशे का उपयोग करेगी।
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• मैंने मार्गों में सभी पृष्ठों को स्तरित किया। उदाहरण के लिए, मेटा.रैंक पृष्ठ स्तर का प्रतिनिधित्व करता है, जैसे कि 1.5>2.5>3.5 का अर्थ है पहली परत से तीसरी परत में दूसरी परत में प्रवेश करना।

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},                            },
]

• क्योंकि सभी पृष्ठ कैश्ड हैं, मूल विचार है [कैश कब नष्ट होगा? ]. मेरा डिज़ाइन है: वर्तमान पृष्ठ कैश को उसी स्तर पर अगले पृष्ठ पर स्विच करते समय रखा जाएगा, और [पिछले पृष्ठ पर लौटने पर वर्तमान पृष्ठ कैश नष्ट हो जाएगा]।
• तो main.js में, मैंने मार्ग छोड़ने की घटना को रोकने के लिए Vue.mixin विधि का उपयोग किया, और अवरोधन विधि में पृष्ठ कैश को नष्ट करने के कार्य को लागू किया। कोर कोड इस प्रकार है:

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();
    },
});

सारांश: वास्तव में, ऊपरी-स्तरीय KeepAlive घटक के माध्यम से जहां पृष्ठ घटक स्थित है, वस्तु में कैश सूची को हिंसक रूप से हेरफेर किया जाता है। . .

सरल और सीधा, हालांकि बहुत सुंदर नहीं है, इसका उपयोग करना आसान है, हाहा :)

बेशक, मुझे अभी भी उम्मीद है कि आधिकारिक समर्थन एपीआई बेहतर होगा।

@wanyaxing मैं रूटिंग के माध्यम से पृष्ठ के कैशिंग को नियंत्रित करता हूं

उदाहरण के लिए, मेरे पास/निष्पादित/और उसका चाइल्ड रूट/निष्पादित/चार्ट/ है। मैं उन घटकों को नष्ट करने के लिए हैक करने के लिए मिक्सिन विधि का भी उपयोग करता हूं, जिन्हें मार्ग छोड़ने पर कैश करने की आवश्यकता नहीं होती है। मैं जो करना चाहता हूं वह है रूट से रूट करना सबसेट के लिए माता-पिता। माता-पिता को कैश किया गया है, और अन्य स्थितियां नष्ट हो गई हैं, इसलिए हमें केवल रूटिंग को नियंत्रित करने की आवश्यकता है, बिना किसी विशेषता को जोड़े, मैं आलसी हूं;

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

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

    next();

  }
});

धन्यवाद @wanyaxing , आपका कोड मेरे लिए बहुत उपयोगी है। मुझे संदर्भित करने दें

मुझे पता चला कि कैश नष्ट नहीं हुआ था।@LinusBorg . के साथ संवाद करने की पूरी कोशिश करें

@wanyaxing मैं कैश प्राप्त करने का एक तरीका वू के मूल कोड से परिचित नहीं है, आपका कोड अधिक उपयोगी है, मैंने परीक्षा उत्तीर्ण की, बहुत अच्छा, अस्थायी रूप से ऐसा करें, मुझे उम्मीद है कि अधिकारी इस समस्या को हल कर सकते हैं, मैंने पूछा कि क्या कुछ लोगों ने बहुत सारी जानकारी की जाँच की है, और इस या उस तरह की समस्याएँ हैं

हा हा।
इस आधार पर, @leixu2txtek आपको https://github.com/wanyaxing/vue-router-then के साथ संयुक्त प्लग-इन की अनुशंसा करता है, प्रभाव बेहतर है।
वर्तमान पृष्ठ पर उपपृष्ठ खोलने के लिए vue-router-then का उपयोग करें, और आप वर्तमान पृष्ठ पर उपपृष्ठ की जानकारी या ईवेंट प्राप्त कर सकते हैं।
this.$routerThen.push('/chose').then(vm => {})

सबसे अधिक इस्तेमाल किया जाने वाला उदाहरण देने के लिए, उदाहरण के लिए, ऑर्डर पेज भरते समय, आपको चयन के लिए पता सूची खोलनी होगी।

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

फिर /select_address द्वारा खोले गए मार्ग में, पता चुनने के बाद, एक इनपुट ईवेंट ट्रिगर करें और पृष्ठ पर वापस जाएं।

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

इसके लिए ऊपर वर्णित कैशिंग रणनीति के आधार पर माता-पिता और बच्चे के रूटिंग के बीच सीधे संपर्क की आवश्यकता होती है। हालांकि, कार्यान्वयन के बाद यह बहुत दिलचस्प होगा। विकास का विचार बहुत सहज है। आपको vuex में अस्थायी डेटा संग्रहीत करने पर विचार करने की आवश्यकता नहीं है , डेटा प्राप्त करने के लिए बस पेज खोलें। कर सकते हैं।

@fadexiii क्या आपका मतलब है कि यदि आप राउटर का उपयोग कर रहे हैं, तो क्या राउटर से संबंधित घटक में नाम शामिल करना चाहिए?
---- राउटर.जेएस ----

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

---- विचार/a.vue ----

export default {
  name: 'xxxa'
}

कंपोनेंटए या ए या एक्सएक्सए में क्या स्टोर किया जाना चाहिए?

@yiwuyu xxxa

@jkzing क्या होगा यदि मैं एक ही घटक को दो बार लोड करता हूं, एक को कैश करने की आवश्यकता होती है, और दूसरे को कैश करने की आवश्यकता नहीं होती है?उनके घटक नाम समान हैं।

मुझे भी इस समस्या का सामना करना पड़ा। जोड़ें
मेटा: {
KeepAlive: सच // को कैश करने की आवश्यकता है
}
बंद करें क्लिक करने पर गलत पर सेट करें
फिर श्रोता को सत्य में बदलें
विवरण के लिए https://mp.csdn.net/postedit/82628953 देखें। अब परीक्षण में कोई समस्या नहीं है। मुझे नहीं पता कि बाद में कोई समस्या होगी या नहीं।

जब टैब स्विच किया जाता है, तो कैश बंद हो जाता है और कैश नष्ट हो जाता है और अगली बार जब इसे खोला जाता है और कई नेस्टेड सब-रूटिंग पृष्ठों के साथ पुनः लोड किया जाता है, तो यह सच है।

दरअसल, फोरम में एक बार इस सवाल का जवाब देने से पहले आप keep-alive का include या exclude का इस्तेमाल कर सकते हैं।

आपको एक सरल उदाहरण लिखने के लिए:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

मैं इस उदाहरण को समझता हूं। मैं यहां देवताओं से पूछना चाहता हूं। मेरा व्यवसाय इस तरह है। बाईं ओर एक लंबवत टैब है। यह टैब उपयोगकर्ता द्वारा गतिशील रूप से जोड़ा या हटाया जा सकता है। किसी भी एक टैब पर क्लिक करें, और दाईं ओर संबंधित टैब प्रदर्शित करता है यह टैब। एक पेड़ वास्तव में एक ही पेड़ है, लेकिन पेड़ द्वारा चुने गए नोड्स अलग हैं। प्रारंभिक विचार एक टैब आइटम जोड़ना है, दाईं ओर एक पेड़ जोड़ना है, टैब स्विच करते समय, पेड़ छुपाया जाएगा और तदनुसार प्रदर्शित किया जाएगा (वी-शो), लेकिन जब अधिक टैब होंगे, तो बहुत सारे पेड़ होंगे दाईं ओर, और डोम नोड्स बहुत अधिक हैं। यदि आपको डिस्प्ले को छिपाने और v-if का उपयोग करने की आवश्यकता नहीं है, तो ट्री स्टेट्स (चयनित, विस्तारित, स्क्रॉल किए गए) होंगे जिन्हें सहेजा नहीं जा सकता है, इसलिए मैंने बाद में सोचा रख-रखाव का, जो राज्य को बचा सकता है। लेकिन मैं vue का एकल-फ़ाइल घटक हूं। टैब मुख्य पृष्ठ पर हैं। पेड़ एक घटक है जिसे आयात किया जाता है। आयात आने के बाद, यह सीधे घटकों की संपत्ति में पंजीकृत होता है। मैं इसके लिए कई नाम कैसे बना सकता हूं आपके जैसा पेड़ पोस्ट किया ?? लेकिन वास्तव में, मैं सिर्फ एक घटक हूं। मैंने केवल बाएं टैब से संबद्ध करने के लिए नाम बनाया है। अधिक सटीक रूप से, बाईं ओर एक टैब आइटम को हटाने के लिए, इस टैब आइटम से संबंधित ट्री बफर को भी रखें? लेकिन हमें क्या करना चाहिए?

@ leixu2txtek मैंने उस पीआर को छोड़ दिया है। कैश को जबरन साफ़ करके, मुझे भेस में कैशे घटक को गतिशील रूप से हटाने के कार्य का एहसास हुआ है।

मैं वर्तमान में पूरी साइट पर कैशिंग का उपयोग करता हूं, और पृष्ठ छोड़ने की रूटिंग घटना को रोककर व्यावसायिक तर्क के आधार पर कैश को हटाने के कार्य को कार्यान्वित करता हूं। निम्नलिखित कोड स्निपेट संदर्भ के लिए हैं:

• राउटर-व्यू को कीप-अलाइव में रखें, और पूरी साइट डिफ़ॉल्ट रूप से कैशे का उपयोग करेगी।
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• मैंने मार्गों में सभी पृष्ठों को स्तरित किया। उदाहरण के लिए, मेटा.रैंक पृष्ठ स्तर का प्रतिनिधित्व करता है, जैसे कि 1.5>2.5>3.5 का अर्थ है पहली परत से तीसरी परत में दूसरी परत में प्रवेश करना।

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},                            },
]

• क्योंकि सभी पृष्ठ कैश्ड हैं, मूल विचार है [कैश कब नष्ट होगा? ]. मेरा डिज़ाइन है: वर्तमान पृष्ठ कैश को उसी स्तर पर अगले पृष्ठ पर स्विच करते समय रखा जाएगा, और [पिछले पृष्ठ पर लौटने पर वर्तमान पृष्ठ कैश नष्ट हो जाएगा]।
• तो main.js में, मैंने मार्ग छोड़ने की घटना को रोकने के लिए Vue.mixin विधि का उपयोग किया, और अवरोधन विधि में पृष्ठ कैश को नष्ट करने के कार्य को लागू किया। कोर कोड इस प्रकार है:

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();
    },
});

सारांश: वास्तव में, ऊपरी-स्तरीय KeepAlive घटक के माध्यम से जहां पृष्ठ घटक स्थित है, वस्तु में कैश सूची को हिंसक रूप से हेरफेर किया जाता है। . .

सरल और सीधा, हालांकि बहुत सुंदर नहीं है, इसका उपयोग करना आसान है, हाहा :)

बेशक, मुझे अभी भी उम्मीद है कि आधिकारिक समर्थन एपीआई बेहतर होगा।

लेकिन इस तरह मेमोरी जारी नहीं होगी। मैं कीपलाइव को बंद कर देता हूं और यह ठीक हो जाएगा। कीपलाइव जोड़ना और फिर मैन्युअल रूप से कैशे को हटाना और मेमोरी को नष्ट करना अभी भी बढ़ रहा है। मुझे आश्चर्य है कि क्या आपने इस पहलू पर ध्यान दिया है?

@Liudapeng मैंने पहले मेमोरी उपयोग का ध्यानपूर्वक अध्ययन नहीं किया है। मैंने एक मोटा परीक्षण किया, और मेमोरी ग्राफ टाइमलाइन में मेमोरी ड्रॉप देखने के बाद मैंने इसका ध्यानपूर्वक अध्ययन नहीं किया।

मैं हाल ही में थोड़ा व्यस्त हूँ। मैंने आपका संदेश दो दिन पहले देखा था और मेरे पास आपको उत्तर देने का समय नहीं है।

मैंने अभी एक और परीक्षण किया, पेज के पांच या छह स्तरों में गहराई तक जाने के लिए कई बार दोहराया और फिर होम पेज पर वापस आ गया। मेमोरी टाइमलाइन के परिणाम इस प्रकार हैं:

• जीवित रहने को चालू करें, और घटक को गतिशील रूप से नष्ट करें (अर्थात, ऊपर वर्णित विधि का उपयोग करें):
  > आप टाइमलाइन में मेमोरी ड्रॉप को स्पष्ट रूप से देख सकते हैं। मुझे लगता है कि मेमोरी नष्ट हो गई है।
  

जीवित रहने का उपयोग न करें:

क्योंकि कोई रख-रखाव नहीं है, मेमोरी स्टैक बहुत तेज़ नहीं होगा, लेकिन यह अभी भी उच्च और उच्च हो रहा है (हो सकता है कि मेरा कोड जल्दी में बदल दिया गया हो, और कहीं और मेमोरी लीक हो)

लेकिन सामान्य तौर पर, मुझे लगता है कि गतिशील विनाश का उपयोग करने के बाद, स्मृति उपयोग अभी भी स्वीकार्य सीमा के भीतर है, इसलिए यदि आप स्मृति में उल्लेखनीय वृद्धि का अनुभव करते हैं, तो आपको यह जांचना चाहिए कि घटक नष्ट होने पर बाध्यकारी घटना नष्ट नहीं हुई है (हालांकि कारण घटक को KeepAlive के कैश सरणी से हटा दिया जाता है, यह स्मृति से नष्ट नहीं होता है)।

कृपया दोबारा जांच करें।

@wanyaxing मुझे अपनी परियोजना में एक ही समस्या है (बिना जीवित रखे)

कॉल करें $destory() गतिशील घटक काम नहीं करता है, और मुझे लगता है कि जेएस ढेर नोड्स की संख्या के साथ अधिक हो जाता है। ऐसा प्रतीत होता है कि गतिशील घटक ने उन्हें नष्ट किए बिना डोम बनाया।

@bigggge नाम घटक के अंदर की विशेषता है, न कि मार्ग की विशेषता

मेरा सवाल और भी अजीब है। मेरा vue संस्करण 2.3.3 है। पेज ए में अगले पेज को लोड करने के लिए स्क्रॉल करने के लिए एक कोड है। मैंने पेज ए से पेज बी पर स्विच किया। जब पेज बी स्क्रॉल किया गया, तो मैंने पाया कि पेज ए के लिए अगला पेज लोड करने के लिए कोड होगा अभी भी निष्पादित किया जाना है। जब मैं वैश्विक रख-रखाव को हटा देता हूं, तो उपरोक्त समस्या नहीं होगी। लेकिन मेरे सभी सक्रिय फिर से अमान्य हैं, मुझे निर्मित का उपयोग करना होगा।

मेरा सवाल और भी अजीब है। मेरा vue संस्करण 2.3.3 है। पेज ए में अगले पेज को लोड करने के लिए स्क्रॉल करने के लिए एक कोड है। मैंने पेज ए से पेज बी पर स्विच किया। जब पेज बी स्क्रॉल किया गया, तो मैंने पाया कि पेज ए के लिए अगला पेज लोड करने के लिए कोड होगा अभी भी निष्पादित किया जाना है। जब मैं वैश्विक रख-रखाव को हटा देता हूं, तो उपरोक्त समस्या नहीं होगी। लेकिन मेरे सभी सक्रिय फिर से अमान्य हैं, मुझे निर्मित का उपयोग करना होगा।

यह वैश्विक निगरानी के कारण हो सकता है, आप यह तय कर सकते हैं कि स्क्रॉल करते समय यह वर्तमान मार्ग है या नहीं, और फिर तय करें कि अगला पृष्ठ लोड करना है या नहीं

मेरा सवाल और भी अजीब है। मेरा vue संस्करण 2.3.3 है। पेज ए में अगले पेज को लोड करने के लिए स्क्रॉल करने के लिए एक कोड है। मैंने पेज ए से पेज बी पर स्विच किया। जब पेज बी स्क्रॉल किया गया, तो मैंने पाया कि पेज ए के लिए अगला पेज लोड करने के लिए कोड होगा अभी भी निष्पादित किया जाना है। जब मैं वैश्विक रख-रखाव को हटा देता हूं, तो उपरोक्त समस्या नहीं होगी। लेकिन मेरे सभी सक्रिय फिर से अमान्य हैं, मुझे निर्मित का उपयोग करना होगा।

यह वैश्विक निगरानी के कारण हो सकता है, आप यह तय कर सकते हैं कि स्क्रॉल करते समय यह वर्तमान मार्ग है या नहीं, और फिर तय करें कि अगला पृष्ठ लोड करना है या नहीं

हां, मैं vue-infinite-scroll प्लग-इन का उपयोग करता हूं। जब मैं ग्लोबल कीप-अलाइव का उपयोग करता हूं, तो यह मॉनिटरिंग इवेंट को नहीं हटाता है। मैंने इस प्लग-इन को फिर से लिखा है।

मैंने कैश को साफ़ करने के कार्य को प्राप्त करने के लिए @wanyaxing की स्क्रिप्ट का उपयोग किया, और रिकॉर्ड कूद की कतार के साथ, रोलबैक की आवश्यकता से निपटना और रीफ्रेश नहीं करना आसान है।स्क्रिप्ट को व्यवस्थित और सारगर्भित किया गया है
https://gist.github.com/lingceng/c204bac2704d03db99932d5457e662e6

@jkzing क्या होगा यदि मैं एक ही घटक को दो बार लोड करता हूं, एक को कैश करने की आवश्यकता होती है, और दूसरे को कैश करने की आवश्यकता नहीं होती है?उनके घटक नाम समान हैं।

मेरे पास यह प्रश्न भी है। शामिल करें इस आवश्यकता को पूरा नहीं कर सकता। यदि एकाधिक रूटिंग पृष्ठ एक घटक से मेल खाते हैं, तो केवल एक घटक नाम है। मुझे क्या करना चाहिए?

जब टैब स्विच किया जाता है, तो कैश बंद हो जाता है और कैश नष्ट हो जाता है और अगली बार जब इसे खोला जाता है और कई नेस्टेड सब-रूटिंग पृष्ठों के साथ पुनः लोड किया जाता है, तो यह सच है।

@ heng1234नमस्कार, क्या आपने इस समस्या का समाधान किया है? मार्गदर्शन के लिए संपर्क जानकारी कौन छोड़ सकता है?

रूटिंग द्वारा पृष्ठों को स्विच न करें और घटकों द्वारा स्विच न करें
https://blog.csdn.net/qq_39313596/article/details/82628953

[email protected]

से: कोडज़ेरो123
भेजने का समय: 2019-12-03 10:04
प्राप्तकर्ता: vuejs/vue
सीसी: hlvy; उल्लेख
विषय: पुन: [vuejs/vue] मुझे आशा है कि जीवित रहने से कैश्ड घटकों को गतिशील रूप से हटाने का कार्य बढ़ सकता है (#6509)
जब टैब स्विच किया जाता है, तो कैश बंद हो जाता है और कैश नष्ट हो जाता है और अगली बार जब इसे खोला जाता है और कई नेस्टेड सब-रूटिंग पृष्ठों के साथ पुनः लोड किया जाता है, तो यह सच है।
@ heng1234नमस्कार, क्या आपने इस है-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें, या सदस्यता समाप्त करें।

@wanyaxing आप तीन-स्तरीय रूटिंग कैश के लिए प्रभावी नहीं हैं। उदाहरण के लिए, vue-element-admin में, जब कई तीन-स्तरीय टैग टैग सक्षम होते हैं, तो टैग टैग स्विच करने से कैशे घटक नष्ट नहीं होगा, लेकिन केवल एक तिहाई खुलेगा -लेवल रूटिंग टैग टैग। , इसे नष्ट किया जा सकता है। उदाहरण के लिए, निम्न मेनू 1-0 और मेनू 1-1 सक्षम करें।
रूटिंग।
{ 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' } } ] } ] }

`व्यू.मिक्सिन({
पहले से बाहर निकलें: फ़ंक्शन (से, से, अगला) {
अगर (from.meta.noCache) {
अगर (यह। $ vnode && यह। $ vnode.data.keepAlive) {
अगर (यह।$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();

},
});`

विचार इस प्रकार का विचार है। विचार में कोई समस्या नहीं है। कैश को कब कॉल करना और नष्ट करना है, यह आपके व्यवसाय में विशिष्ट कार्यान्वयन पर निर्भर करता है।

हमारे व्यापार पक्ष पर इस तरह का परिदृश्य बहुत ही परिदृश्य होना चाहिए:
1. मैंने कई पृष्ठ ब्राउज़ किए हैं और उन्हें कैश करने की आवश्यकता है
2. बाहर निकलने के लिए क्लिक करें, आपको सभी कैशे साफ़ करने होंगे
3. लॉगिन के बाद अन्य त्रुटि पुनर्निर्देशन संकेत हैं, ये पृष्ठ कैश नहीं हैं
4. लॉगिन सफल है, और नया पेज कैश किया जाना जारी है

अब मैंने पाया कि 2 तक पहुंचने पर सभी कैश को साफ़ करना असंभव था। vuex में अधिकतम मूल्य रखना और इसे 1 पर सेट करना अभी भी अमान्य है, vue डेवलपर टूल के आधार पर, अभी भी कैश किए गए पृष्ठ हैं।
मेरे लिए और भी अजीब बात यह है कि 3 में अन्य गैर-लॉगिन पृष्ठों पर कूदने से 1 में कैश्ड पेज की माउंटिंग शुरू हो जाएगी, और डेवलपर टूल को देखते हुए, ये पेज सभी निष्क्रिय हैं। अरे, यह अलग पेज लॉजिक की ओर जाता है। तरह समस्या का।
बहुत दिनों तक तलाश करने के बाद भी पता नहीं क्यों

हमारे व्यापार पक्ष पर इस तरह का परिदृश्य बहुत ही परिदृश्य होना चाहिए:
1. मैंने कई पृष्ठ ब्राउज़ किए हैं और उन्हें कैश करने की आवश्यकता है
2. बाहर निकलने के लिए क्लिक करें, आपको सभी कैशे साफ़ करने होंगे
3. लॉगिन के बाद अन्य त्रुटि पुनर्निर्देशन संकेत हैं, ये पृष्ठ कैश नहीं हैं
4. लॉगिन सफल है, और नया पेज कैश किया जाना जारी है

अब मैंने पाया कि 2 तक पहुंचने पर सभी कैश को साफ़ करना असंभव था। vuex में अधिकतम मूल्य रखना और इसे 1 पर सेट करना अभी भी अमान्य है, vue डेवलपर टूल के आधार पर, अभी भी कैश किए गए पृष्ठ हैं।
मेरे लिए और भी अजीब बात यह है कि 3 में अन्य गैर-लॉगिन पृष्ठों पर कूदने से 1 में कैश्ड पेज की माउंटिंग शुरू हो जाएगी, और डेवलपर टूल को देखते हुए, ये पेज सभी निष्क्रिय हैं। अरे, यह अलग पेज लॉजिक की ओर जाता है। तरह समस्या का।
बहुत दिनों तक तलाश करने के बाद भी पता नहीं क्यों

आपके परिदृश्य में, 2 के समय, आपको सीधे पृष्ठ को रीफ्रेश करने पर विचार करना चाहिए, जो सबसे सुरक्षित और सबसे सीधा समाधान है।

क्योंकि शामिल घटक के नाम से मेल खाता है, क्या होगा यदि एकाधिक मार्ग एक घटक से मेल खाते हैं? क्या एक ही घटक को एक अलग नाम देने का कोई तरीका है?