vue 🚀 - آمل أن يؤدي استمرار التشغيل إلى زيادة وظيفة حذف المكونات المخزنة مؤقتًا بشكل ديناميكي

في الواقع ، قبل الإجابة على هذا السؤال مرة واحدة في المنتدى ، يمكنك استخدام keep-alive من include أو exclude للقيام بذلك.

لكتابة مثال بسيط:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

jkzing في ٤ سبتمبر ٢٠١٧

👍13

أليست هذه صورة مكررة من # 6259؟

posva في ٥ سبتمبر ٢٠١٧

posva نعم ، وضع مماثل. إنه على وشك مسح ذاكرة التخزين المؤقت keep-alive ديناميكيًا أثناء وقت التشغيل.

jkzing في ٥ سبتمبر ٢٠١٧

jkzing شكرًا جزيلاً لك ، يجب أن تكون طريقتك قادرة على إكمال السيناريو الذي ذكرته أعلاه ، ولكن لا يزال لدي سيناريو ، مثل صفحة قائمة ، إذا تم تبديلها من علامة التبويب ، آمل أن تظل حية ، وتحصل على البيانات مباشرة من الذاكرة ، إذا بعد تعديل جزء من البيانات ، ينتقل البرنامج إلى صفحة القائمة ، على أمل الحصول على بيانات جديدة في الخلفية. على الرغم من أنه يمكنني الحصول على البيانات الجديدة من الخلفية بعد اكتمال الصفحة ، فإنه يشعر ليس أنيقًا بدرجة كافية. إذا كان هناك واجهة برمجة تطبيقات أعلاه ، فأنا بحاجة فقط إلى تغييرها بعد التعديل. يتم مسح الاحتفاظ بجهاز التوجيه هذا ، ويجب الحصول على البيانات تلقائيًا من الخلفية. لا أعرف ما إذا كان ما قلته يمكن أن يجعلك تفهم. باختصار ، آمل أن أكون قادرًا على جعل التطبيق أحادي الصفحة بأناقة مثل التأثير متعدد علامات التبويب لإطار iframe السابق: http: //www.sucaihuo .com / modals / 16/1653 / demo / أعلاه ، شكرًا لك.

okjesse في ٥ سبتمبر ٢٠١٧

👍2

okjesse يمكن القيام بذلك أيضًا ، كل ما تحتاجه هو ترقية include أو exclude إلى مكونات ذات مستوى أعلى ؛ أو ، إذا تم استخدام vuex ، ضع include متجر vuex .

باختصار ، يوفر Vue واجهة برمجة تطبيقات أساسية لإنجاز ذلك ، وإذا كنت تريد استخدامه بشكل ملائم ، فأنت بحاجة إلى تغليفه قليلاً.

jkzing في ٥ سبتمبر ٢٠١٧

👍2

jkzing فهم ، شكرًا لك ، أنا الآن أكتب

okjesse في ٥ سبتمبر ٢٠١٧

jkzing ، ولكن حتى إذا كان من الممكن تحقيق ذلك ، أعتقد أنه من الأفضل أن يكون لديك واجهة برمجة التطبيقات هذه ، فإن الدلالات ستكون مختلفة ، ما أريده هو مسح البيانات التي ظلت على قيد الحياة ، والمكون نفسه لا يزال على قيد الحياة ، بدلاً من ذلك من دون توقف ما إذا كان التبديل على قيد الحياة

okjesse في ٥ سبتمبر ٢٠١٧

👍3

هذه مجرد واحدة من المشاكل ، فالفتح المستمر للصفحات الجديدة التي نواجهها سيتسبب في الكثير من الذاكرة ، وفي النهاية سيتجمد المتصفح ، ولا يجب أن يكون له أي علاقة بميزة Keepalive.إذا استطعنا ،

tomatoo1 في ٥ سبتمبر ٢٠١٧

ما نريد تحقيقه هو أن نقرر ما إذا كنا سنستخدم الصفحة المخبأة أو صفحة جديدة قبل الانتقال إلى الصفحة مباشرة.واجهة برمجة التطبيقات القديمة لا يمكنها فعل ذلك

tomatoo1 في ٥ سبتمبر ٢٠١٧

👍3

لقد واجهت أيضًا هذا المطلب. ثم قمت بالنقر فوق قائمة القائمة للاتصال ، وأضفت تسمية في علامات التبويب وقمت بتخزين المكون الذي تم فتحه مؤخرًا مؤقتًا ؛ قمت بالنقر فوق تسمية الإغلاق ، وآمل حذف المكون المخزن مؤقتًا ؛ لقد اتصلت بهذا. $ in وظيفة الخطاف المعطلة للمكون. تدمير () ؛ هذا يمكن أن يمسح ذاكرة التخزين المؤقت ، ولكن وجد أن المكون الجديد لن يتم تخزينه مؤقتًا عند فتح الاتصال في المرة القادمة

fadexiii في ٢٠ سبتمبر ٢٠١٧

👍20

fadexiii لقد حللت الطريقة الحالية ، والتي يمكن تحقيقها عن طريق الإعداد الديناميكي

okjesse في ٢١ سبتمبر ٢٠١٧

👎3 👍1

okjesse يحتوي برنامج البقاء على قيد الحياة على <router-view></router-view> طريقة التضمين لا تعمل

fadexiii في ٢١ سبتمبر ٢٠١٧

okjesse الآن لم

fadexiii في ٢١ سبتمبر ٢٠١٧

لمعلوماتك: تم التنفيذ في 2cba6d4cb1db8273ee45cccb8e50ebd87191244e

yyx990803 في ٦ أكتوبر ٢٠١٧

👍18

fadexiii # 6961 نفس احتياجاتك ، كيف تحلها؟

JacBian في ٣١ أكتوبر ٢٠١٧

تضمين @ Jack-93 استخدم الإبقاء على قيد الحياة ، عند فتح علامة جديدة ، تتم إضافة اسم المكون الحالي إلى مصفوفة التضمين ، ويتم حذف اسم المكون لعلامة الإغلاق من المصفوفة عند إغلاق العلامة.

fadexiii في ٣١ أكتوبر ٢٠١٧

👍6

عند رؤية طريقة التدمير $ ، أعتقد أن هذا هو الاستخدام الصحيح ، والذي يحدد ما إذا كان سيتم تخزين المكون مؤقتًا عند مغادرة الصفحة من خلال سلوكيات مستخدم مختلفة في المكون.
(على سبيل المثال ، مكون رسالة ، يجب تدمير هذا المكون بعد إرسال الرسالة بنجاح. إذا لم يتم إرسالها ، فيجب الاحتفاظ بذاكرة التخزين المؤقت للمستخدم للدخول والمتابعة في المرة القادمة.)
ومع ذلك ، بعد التدمير ، سيؤدي تكرار الوصول إلى هذا المكون مرة أخرى إلى نتائج غريبة ، ولم يعد من الممكن تخزين المكون مؤقتًا. أعتقد أن هذا خطأ.

wanyaxing في ٢٩ نوفمبر ٢٠١٧

👍20 ❤3

wanyaxing لقد واجهت أيضًا مشكلة مماثلة لك. لقد استخدمت ميزة "البقاء على قيد الحياة" لتخزين كافة المكونات الفرعية مؤقتًا. صفحة القائمة أ --- "صفحة التفاصيل ب ---" صفحة ثلاثية المستويات D. عند الانتقال إلى الأمام ، تم فتح كل يتم تخزين المسارات في sessionStorage. عند العودة ، يتم الحكم على ما إذا كان المسار التالي في sessionStorage. إذا كان الأمر كذلك ، فسيتم إتلاف النسخة الحالية.
في هذه الحالة ، لا توجد مشكلة لأول مرة ، ويمكن تشغيلها بشكل طبيعي. بعد مرتين أو أكثر ، سيتم تخزين B مؤقتًا عدة مرات. في كل مرة تعود من D إلى B ، سيتم إنشاء B جديد ، و لا يزال B المخزن مؤقتًا مسبقًا في الذاكرة ، كما هو موضح في الشكل:

الكود الأساسي هو كما يلي:

realfly08 في ٩ ديسمبر ٢٠١٧

👍5

@ realfly08 حاولت تقديم PR لحل هذه المشكلة ، ولكن يبدو أن التقديم فشل. لم أعرف كيفية اجتياز مراجعة التعليمات البرمجية التلقائية لـ vue-. -https :

كنت أيضًا أستعد لذاكرة التخزين المؤقت على مستوى الموقع من قبل ، ثم واجهت الحفرة المنطقية لتحديث ذاكرة التخزين المؤقت.
لقد تخليت الآن عن ذاكرة التخزين المؤقت للموقع بالكامل ، وقمت بتشغيل ذاكرة التخزين المؤقت على صفحات النموذج الرئيسية فقط ، ثم تم الحكم ديناميكيًا في الكود على ما إذا كنت ستحتفظ ببيانات الصفحة الحالية ، وهو تخطي مؤقت لهذه المشكلات ، لكن ما زلت أشعر أن هذا المنطق ليس جيدا بما فيه الكفاية.

wanyaxing في ١٠ ديسمبر ٢٠١٧

wanyaxing لقد واجهت أيضًا مشكلة مماثلة. الوظيفة المنطقية المراد تنفيذها هي صفحات A-> B-> C 3. يتم استخدام ذاكرة التخزين المؤقت عند العودة ، ويتم إعادة عرضها عند الدخول مرة أخرى. حاليًا ، يتم الاحتفاظ بكل صفحة على قيد الحياة ، ثم أحكم على الصفحة ب. إذا كنت تريد العودة إلى الصفحة السابقة (انتقل -1) ، فقم بتدمير المكون الحالي في إلغاء تنشيطه واستدعاء $ إتلاف. عندما تدخل الصفحة C مرة أخرى بالترتيب ، ارجع إلى الصفحة B ، يمكنك أن ترى أنه تم إعادة إنشاء صفحة B ، فهناك صفحة B في ذاكرة التخزين المؤقت في نفس الوقت

hujianlong في ١٤ ديسمبر ٢٠١٧

https://www.jianshu.com/p/cd1baf5b03b0
جمعت هذا

realfly08 في ٢٥ ديسمبر ٢٠١٧

fadexiii ابق على قيد الحياة كيف تستخدم مع عرض جهاز التوجيه؟

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

يتضمن يكتب الاسم في تكوين التوجيه: "تسجيل الدخول"

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

لماذا أقوم بتعيين التضمينات لسلسلة فارغة ، ولا يزال من الممكن تخزينها مؤقتًا؟مطلب مني هو تدمير المسار المخزن مؤقتًا يدويًا

bigggge في ٢٨ ديسمبر ٢٠١٧

بعد إتلاف المكون ، لا يتم إفراغ ذاكرة التخزين المؤقت. أعتقد أن المشكلة هنا.
يوصي الشخص المسؤول عن المشروع باستخدام سمات مثل التضمين للمعالجة. لا أعتقد أنه تم تدميره بشكل مباشر. يمكن تحسين الذاكرة.

wanyaxing اقرأ PR الذي أرسلته ، يجب أن يكون صالحًا ، أو افتح واجهة برمجة تطبيقات إزالة ذاكرة التخزين المؤقت ، أليس كذلك؟

leixu2txtek في ١٠ يوليو ٢٠١٨

@ leixu2txtek لقد تخلت عن تلك العلاقات العامة ، ومن خلال محو ذاكرة التخزين المؤقت بالقوة ، أدركت وظيفة الحذف الديناميكي لعنصر ذاكرة التخزين المؤقت المتخفي.

أستخدم حاليًا التخزين المؤقت على الموقع بالكامل ، وأقوم بتنفيذ وظيفة حذف ذاكرة التخزين المؤقت استنادًا إلى منطق الأعمال من خلال اعتراض حدث التوجيه لمغادرة الصفحة. مقتطفات الشفرة التالية هي للرجوع إليها:

ضع طريقة عرض جهاز التوجيه في وضع التشغيل المستمر ، وسيستخدم الموقع بالكامل ذاكرة التخزين المؤقت افتراضيًا.
<keep-alive><router-view class="transit-view"></router-view></keep-alive>
قمت بترتيب جميع الصفحات في المسارات. على سبيل المثال ، يمثل meta.rank مستوى الصفحة ، مثل 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 في ١٠ يوليو ٢٠١٨

👍20

wanyaxing أتحكم في التخزين المؤقت للصفحة من خلال التوجيه

على سبيل المثال ، قمت / نفذت / وطريقه الفرعي / نفذ / مخططًا /. كما أنني أستخدم طريقة mixin لاختراق المكونات التي لا تحتاج إلى تخزينها مؤقتًا عند مغادرة المسار. ما أريد القيام به هو التوجيه من الأصل إلى المجموعة الفرعية. يتم تخزين الوالد مؤقتًا ، ويتم إتلاف الشروط الأخرى ، لذلك نحتاج فقط للتحكم في التوجيه ، دون إضافة أي سمات ، أنا كسول ؛

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

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

    next();

  }
});

شكرا لك wanyaxing ، الكود الخاص بك مفيد جدا بالنسبة لي. اسمحوا لي أن أشير إلى

اكتشفت أن ذاكرة التخزين المؤقت لم يتم إتلافها.ابذل قصارى جهدك للتواصل مع

leixu2txtek في ١٠ يوليو ٢٠١٨

wanyaxing لقد كنت أبحث عن طريقة للحصول على ذاكرة التخزين المؤقت ، لست على دراية بالرمز الأساسي لـ vue ، الكود الخاص بك أكثر فائدة ، لقد اجتزت الاختبار ، جيد جدًا ، أفعل هذا مؤقتًا ، آمل أن يتمكن المسؤول من حل هذه المشكلة ، سألت إذا كان قلة من الناس قد فحصوا الكثير من المعلومات ، وهناك مشاكل من هذا النوع أو ذاك

leixu2txtek في ١٠ يوليو ٢٠١٨

ها ها.
على هذا الأساس ، يوصي @ leixu2txtek بمكوّن إضافي ، جنبًا إلى جنب مع https://github.com/wanyaxing/vue-router- ثم ، التأثير أفضل.
استخدم vue-router- ثم لفتح صفحة فرعية على الصفحة الحالية ، ويمكنك الحصول على معلومات أو أحداث الصفحة الفرعية على الصفحة الحالية.
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 ، فقط افتح الصفحة للحصول على البيانات.

wanyaxing في ١٠ يوليو ٢٠١٨

😄4

fadexiii هل تقصد أنه إذا كنت تستخدم جهاز توجيه ، فهل يجب تضمين الاسم في المكون المقابل
---- جهاز التوجيه. js ----

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

---- وجهات النظر / a.vue ----

export default {
  name: 'xxxa'
}

ما الذي يجب تخزينه في التضمين هو ComponentA أو a أو xxxa؟

yiwuyu في ٢٥ يوليو ٢٠١٨

تضمين التغريدة

fadexiii في ٢٥ يوليو ٢٠١٨

jkzing ماذا لو قمت بتحميل نفس المكون مرتين ، يحتاج أحدهما إلى التخزين المؤقت ، والآخر لا يحتاج إلى التخزين المؤقت؟ أسماء المكونات الخاصة بهم هي نفسها.

chenliang-dragon في ٣ سبتمبر ٢٠١٨

😕10 👀7 👍3

أنا أيضا واجهت هذه المشكلة
ميتا: {
keepAlive: صحيح // يحتاج إلى ذاكرة التخزين المؤقت
}
اضبط على خطأ عند النقر فوق إغلاق
ثم غيّر المستمع إلى صحيح
راجع https://mp.csdn.net/postedit/82628953 للحصول على التفاصيل. الآن الاختبار ليس مشكلة. لا أعرف ما إذا كانت هناك مشاكل لاحقًا.

heng1234 في ١١ سبتمبر ٢٠١٨

عندما يتم تبديل علامة التبويب ، يتم إغلاق ذاكرة التخزين المؤقت وإتلاف ذاكرة التخزين المؤقت وفي المرة التالية التي يتم فتحها وإعادة تحميلها باستخدام عدة صفحات توجيه فرعية متداخلة ، يكون الشيء نفسه صحيحًا.

heng1234 في ١١ سبتمبر ٢٠١٨

في الواقع ، قبل الإجابة على هذا السؤال مرة واحدة في المنتدى ، يمكنك استخدام keep-alive من include أو exclude للقيام بذلك.
لكتابة مثال بسيط:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

أنا أفهم هذا المثال. أريد أن أسأل الآلهة هنا. عملي مثل هذا. الجانب الأيسر هو علامة تبويب رأسية. يمكن للمستخدم إضافة أو حذف علامة التبويب هذه ديناميكيًا. انقر فوق أي علامة من علامات التبويب ، ويعرض الجانب الأيمن العلامة المقابلة لـ علامة التبويب هذه ، الشجرة هي في الواقع نفس الشجرة ، لكن العقد التي تحددها الشجرة مختلفة. الفكرة الأولية هي إضافة عنصر علامة تبويب ، إضافة شجرة على الجانب الأيمن ، عند تبديل علامات التبويب ، سيتم إخفاء الشجرة وعرضها وفقًا لذلك (v-show) ، ولكن عندما يكون هناك المزيد من علامات التبويب ، سيكون هناك الكثير من الأشجار على الجانب الأيمن ، وعقد dom كثيرة جدًا. إذا لم تكن بحاجة لإخفاء العرض واستخدام v-if ، فستكون هناك حالات شجرية (محددة ، موسعة ، تم تمريرها) لا يمكن حفظها ، لذلك اعتقدت لاحقًا من البقاء على قيد الحياة ، والذي يمكن أن ينقذ الدولة. لكنني مكون ملف واحد من vue. علامات التبويب موجودة في الصفحة الرئيسية. الشجرة هي أحد المكونات التي يتم استيرادها. بعد أن يتم استيرادها ، يتم تسجيلها مباشرة في خاصية المكونات. كيف يمكنني إنشاء أسماء متعددة لـ الشجرة مثلك نشرت؟ لكن في الحقيقة ، أنا مجرد مكون. لقد أنشأت الاسم فقط لربطه بعلامة التبويب اليسرى. بتعبير أدق ، لحذف عنصر علامة تبويب على الجانب الأيسر ، هل تريد أيضًا حذف المخزن المؤقت الشجري المقابل لعنصر علامة التبويب هذا في Keepalive؟ لكن ماذا علينا أن نفعل؟

my3188 في ١٥ سبتمبر ٢٠١٨

@ leixu2txtek لقد تخلت عن تلك العلاقات العامة ، ومن خلال محو ذاكرة التخزين المؤقت بالقوة ، أدركت وظيفة الحذف الديناميكي لعنصر ذاكرة التخزين المؤقت المتخفي.
أستخدم حاليًا التخزين المؤقت على الموقع بالكامل ، وأقوم بتنفيذ وظيفة حذف ذاكرة التخزين المؤقت استنادًا إلى منطق الأعمال من خلال اعتراض حدث التوجيه لمغادرة الصفحة. مقتطفات الشفرة التالية هي للرجوع إليها:
ضع طريقة عرض جهاز التوجيه في وضع التشغيل المستمر ، وسيستخدم الموقع بالكامل ذاكرة التخزين المؤقت افتراضيًا.
<keep-alive><router-view class="transit-view"></router-view></keep-alive>
قمت بترتيب جميع الصفحات في المسارات. على سبيل المثال ، يمثل meta.rank مستوى الصفحة ، مثل 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 ذي المستوى الأعلى حيث يوجد مكون الصفحة ، يتم التلاعب بقائمة ذاكرة التخزين المؤقت في الكائن بعنف. . .
بسيطة ومباشرة ، على الرغم من أنها ليست أنيقة للغاية ، فهي سهلة الاستخدام ، هاها :)
بالطبع ، ما زلت آمل أن تظهر واجهة برمجة التطبيقات للدعم الرسمي بشكل أفضل.

لكن بهذه الطريقة لن يتم تحرير الذاكرة.أوقف تشغيل Keepalive وسيكون كل شيء على ما يرام.لا تزال عملية إضافة Keepalive ثم إزالة ذاكرة التخزين المؤقت يدويًا وتدمير الذاكرة تتزايد. أتساءل عما إذا كنت قد انتبهت إلى هذا الجانب؟

Liudapeng في ٢٥ سبتمبر ٢٠١٨

Liudapeng لم أدرس استخدام الذاكرة بعناية من قبل. لقد أجريت اختبارًا تقريبيًا ، ولم

انا مشغول قليلا في الاونة الاخيرة لقد اطلعت على رسالتك قبل يومين ولم يكن لدي الوقت للرد عليك.

لقد أجريت للتو اختبارًا آخر ، كررت عدة مرات للتعمق في المستويات الخمسة أو الستة للصفحة ثم العودة إلى الصفحة الرئيسية. نتائج الجدول الزمني للذاكرة هي كما يلي:

قم بتشغيل خاصية البقاء على قيد الحياة ، وتدمير المكون ديناميكيًا (أي استخدم الطريقة التي ذكرتها أعلاه):
> يمكنك أن ترى بوضوح انخفاض الذاكرة في الجدول الزمني ، وأعتقد أن الذاكرة قد دمرت.

لا تستخدم مادة البقاء على قيد الحياة:

نظرًا لعدم وجود خاصية الاحتفاظ بالذاكرة ، لن يكون مكدس الذاكرة سريعًا جدًا ، ولكنه لا يزال أعلى وأعلى (ربما تم تغيير الكود الخاص بي على عجل ، وهناك تسرب للذاكرة في مكان آخر)

لكن بشكل عام ، أعتقد أنه بعد استخدام التدمير الديناميكي ، لا يزال استخدام الذاكرة ضمن النطاق المقبول ، لذلك إذا واجهت زيادة كبيرة في الذاكرة ، فيجب عليك التحقق مما إذا كان حدث الربط لم يتم إتلافه عند إتلاف المكون (على الرغم من تتم إزالة المكون من مجموعة ذاكرة التخزين المؤقت لـ keepAlive ، ولا يتم إتلافه من الذاكرة).

يرجى التحقق مرة أخرى.

wanyaxing في ٢٩ سبتمبر ٢٠١٨

wanyaxing لدي نفس المشكلة في مشروعي ， دون البقاء على قيد الحياة

استدعاء $ destory () للمكون الديناميكي لا يعمل ، ووجدت أن أكوام JS تتزايد مع عدد العقد ، ويبدو أن المكون الديناميكي أنشأ DOMs دون تدميرها.

salchemist في ١٦ أكتوبر ٢٠١٨

bigggge name هي السمة الموجودة داخل المكون ، وليست سمة المسار

Cxuyang في ١٤ يناير ٢٠١٩

سؤالي أكثر غرابة. إصدار vue الخاص بي هو 2.3.3. تحتوي الصفحة "أ" على رمز للتمرير لتحميل الصفحة التالية. لقد قمت بالتبديل من الصفحة "أ" إلى الصفحة "ب". عندما تم تمرير الصفحة "ب" ، وجدت أن رمز الصفحة "أ" لتحميل الصفحة التالية لا يزال يتم إعدامه. عندما أقوم بإزالة الاستمرارية العالمية ، لن تحدث المشكلة المذكورة أعلاه. لكن كل ما عندي من تنشيط غير صالح مرة أخرى ، لا بد لي من استخدام تم إنشاؤها.

sbitpdc في ٢٣ يناير ٢٠١٩

سؤالي أكثر غرابة. إصدار vue الخاص بي هو 2.3.3. تحتوي الصفحة "أ" على رمز للتمرير لتحميل الصفحة التالية. لقد قمت بالتبديل من الصفحة "أ" إلى الصفحة "ب". عندما تم تمرير الصفحة "ب" ، وجدت أن رمز الصفحة "أ" لتحميل الصفحة التالية لا يزال يتم إعدامه. عندما أقوم بإزالة الاستمرارية العالمية ، لن تحدث المشكلة المذكورة أعلاه. لكن كل ما عندي من تنشيط غير صالح مرة أخرى ، لا بد لي من استخدام تم إنشاؤها.

قد يكون ناتجًا عن المراقبة العالمية ، يمكنك الحكم على ما إذا كان هذا هو المسار الحالي عند التمرير ، ثم تحديد ما إذا كنت تريد تحميل الصفحة التالية

Cxuyang في ٢٣ يناير ٢٠١٩

👍1

سؤالي أكثر غرابة. إصدار vue الخاص بي هو 2.3.3. تحتوي الصفحة "أ" على رمز للتمرير لتحميل الصفحة التالية. لقد قمت بالتبديل من الصفحة "أ" إلى الصفحة "ب". عندما تم تمرير الصفحة "ب" ، وجدت أن رمز الصفحة "أ" لتحميل الصفحة التالية لا يزال يتم إعدامه. عندما أقوم بإزالة الاستمرارية العالمية ، لن تحدث المشكلة المذكورة أعلاه. لكن كل ما عندي من تنشيط غير صالح مرة أخرى ، لا بد لي من استخدام تم إنشاؤها.
قد يكون ناتجًا عن المراقبة العالمية ، يمكنك الحكم على ما إذا كان هذا هو المسار الحالي عند التمرير ، ثم تحديد ما إذا كنت تريد تحميل الصفحة التالية

نعم ، أستخدم المكون الإضافي vue-infinite-scroll. عندما أستخدم برنامج التشغيل الشامل ، لا يزيل حدث المراقبة. لقد أعدت كتابة هذا المكون الإضافي.

sbitpdc في ٢٣ يناير ٢٠١٩

لقد استخدمت البرنامج النصي wanyaxing لتحقيق وظيفة مسح ذاكرة التخزين المؤقت ، ومع قائمة انتظار قفزات السجل ، يكون من الأسهل التعامل مع متطلبات التراجع وليس التحديث.يتم تنظيم النص ووضعه في جوهره
https://gist.github.com/lingceng/c204bac2704d03db99932d5457e662e6

lingceng في ٢٧ نوفمبر ٢٠١٩

jkzing ماذا لو قمت بتحميل نفس المكون مرتين ، يحتاج أحدهما إلى التخزين المؤقت ، والآخر لا يحتاج إلى التخزين المؤقت؟ أسماء المكونات الخاصة بهم هي نفسها.

لدي أيضًا هذا السؤال. لا يمكن لميزة التضمين تلبية هذا المطلب. إذا كانت صفحات التوجيه المتعددة تتوافق مع مكون واحد ، فهناك اسم مكون واحد فقط. فماذا أفعل؟

ijry في ٢٨ نوفمبر ٢٠١٩

عندما يتم تبديل علامة التبويب ، يتم إغلاق ذاكرة التخزين المؤقت وإتلاف ذاكرة التخزين المؤقت وفي المرة التالية التي يتم فتحها وإعادة تحميلها باستخدام عدة صفحات توجيه فرعية متداخلة ، يكون الشيء نفسه صحيحًا.

@ heng1234 مرحبًا ، هل قمت بحل هذه المشكلة؟ من يمكنه ترك معلومات الاتصال للحصول على إرشادات؟

Codezero123 في ٣ ديسمبر ٢٠١٩

لا تقم بتبديل الصفحات عن طريق التوجيه والتبديل حسب المكونات
https://blog.csdn.net/qq_39313596/article/details/82628953

[email protected]

من: Codezero123
وقت الإرسال: 2019-12-03 10:04
المستلم: vuejs / vue
نسخة إلى: hlvy ؛ أذكر
الموضوع: Re: [vuejs / vue] آمل أن يؤدي استمرار التشغيل إلى زيادة وظيفة حذف المكونات المخزنة مؤقتًا ديناميكيًا (# 6509)
عندما يتم تبديل علامة التبويب ، يتم إغلاق ذاكرة التخزين المؤقت وإتلاف ذاكرة التخزين المؤقت وفي المرة التالية التي يتم فتحها وإعادة تحميلها باستخدام عدة صفحات توجيه فرعية متداخلة ، يكون الشيء نفسه صحيحًا.
@ heng1234 مرحبًا ، هل حللت هذه
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بإلغاء الاشتراك.

heng1234 في ٤ ديسمبر ٢٠١٩

👍1

wanyaxing ، أنت غير فعال لذاكرة التخزين المؤقت للتوجيه ذات المستويات الثلاثة. على سبيل المثال ، في vue-element-admin ، عندما يتم تمكين علامات متعددة من ثلاثة مستويات ، لن يؤدي تبديل العلامة إلى تدمير مكون ذاكرة التخزين المؤقت ، ولكن لن يؤدي إلا إلى فتح الثلث علامة التوجيه ذات المستوى ، يمكن إتلافها. على سبيل المثال ، قم بتمكين القائمة التالية 1-0 و menu1-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' } } ] } ] }

"Vue.mixin ({
beforeR outeLeave: الوظيفة (إلى ، من ، التالي) {
إذا (from.meta.noCache) {
إذا (هذا. $ 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();

} ،
}) ؛ `

bigfool-cn في ٢٦ ديسمبر ٢٠١٩

الفكرة هي هذا النوع من الأفكار ، لا توجد مشكلة في الفكرة ، فعند استدعاء ذاكرة التخزين المؤقت وإتلافها ، فهذا يعتمد على التنفيذ المحدد في عملك.

wanyaxing في ٢٦ ديسمبر ٢٠١٩

يجب أن يكون هذا النوع من السيناريو في جانب الأعمال لدينا سيناريو للغاية:
1. لقد تصفحت عدة صفحات وأحتاج إلى ذاكرة التخزين المؤقت
2. انقر للخروج ، تحتاج إلى مسح كل ذاكرة التخزين المؤقت
3. هناك مطالبات أخرى لإعادة توجيه الأخطاء بعد تسجيل الدخول ، ولا يتم تخزين هذه الصفحات في ذاكرة التخزين المؤقت
4. تم تسجيل الدخول بنجاح ، وتستمر الصفحة الجديدة في التخزين المؤقت

وجدت الآن أنه كان من المستحيل مسح جميع ذاكرات التخزين المؤقت عندما وصلت إلى 2. وضع القيمة القصوى للبقاء على قيد الحياة في vuex وضبطها على 1 لا يزال غير صالح ، اعتمادًا على أدوات مطور vue ، لا تزال هناك صفحات مخبأة.
ما هو أكثر غرابة بالنسبة لي هو أن القفز إلى صفحات أخرى غير مسجلة في 3 سيؤدي إلى تحميل الصفحة المخبأة في 1 ، والنظر إلى أدوات المطور ، هذه الصفحات كلها غير نشطة. مرحبًا ، هذا يؤدي إلى منطق صفحة مختلف. نوع من المشكلة.
بعد البحث لفترة طويلة ، ما زلت لا أعرف لماذا

Lynn-cc في ١٥ يناير ٢٠٢٠

يجب أن يكون هذا النوع من السيناريو في جانب الأعمال لدينا سيناريو للغاية:
1. لقد تصفحت عدة صفحات وأحتاج إلى ذاكرة التخزين المؤقت
2. انقر للخروج ، تحتاج إلى مسح كل ذاكرة التخزين المؤقت
3. هناك مطالبات أخرى لإعادة توجيه الأخطاء بعد تسجيل الدخول ، ولا يتم تخزين هذه الصفحات في ذاكرة التخزين المؤقت
4. تم تسجيل الدخول بنجاح ، وتستمر الصفحة الجديدة في التخزين المؤقت
وجدت الآن أنه كان من المستحيل مسح جميع ذاكرات التخزين المؤقت عندما وصلت إلى 2. وضع القيمة القصوى للبقاء على قيد الحياة في vuex وضبطها على 1 لا يزال غير صالح ، اعتمادًا على أدوات مطور vue ، لا تزال هناك صفحات مخبأة.
ما هو أكثر غرابة بالنسبة لي هو أن القفز إلى صفحات أخرى غير مسجلة في 3 سيؤدي إلى تحميل الصفحة المخبأة في 1 ، والنظر إلى أدوات المطور ، هذه الصفحات كلها غير نشطة. مرحبًا ، هذا يؤدي إلى منطق صفحة مختلف. نوع من المشكلة.
بعد البحث لفترة طويلة ، ما زلت لا أعرف لماذا

في السيناريو الخاص بك ، في الوقت 2 ، يجب أن تفكر في تحديث الصفحة مباشرة ، وهو الحل الأكثر أمانًا والأكثر مباشرة.

wanyaxing في ١٦ يناير ٢٠٢٠

لأن التضمين يتوافق مع اسم المكون ، ماذا لو كانت المسارات المتعددة تتوافق مع مكون واحد؟ هل هناك أي طريقة لإعطاء نفس المكون اسمًا مختلفًا؟

wyc2025 في ٦ نوفمبر ٢٠٢٠

Vue: آمل أن يؤدي استمرار التشغيل إلى زيادة وظيفة حذف المكونات المخزنة مؤقتًا بشكل ديناميكي

ما المشكلة التي تحلها هذه الميزة؟

كيف تبدو واجهة برمجة التطبيقات المقترحة؟

التعليق الأكثر فائدة

ال 49 كومينتر

القضايا ذات الصلة