Vue: دعم المزيد من أنواع بيانات التجميع في v-for

نسخة مكررة من https://github.com/vuejs/vue/issues/1319

wenLiangcan ، يمكنك استخدام شيء مثل هذا:

<ul>
    <li v-for="[key, val] of get(map)">{{key}} - {{val}}</li>
</ul>

حيث get() هي وظيفتك.

هاها! يتم فتح مشكلات مماثلة طوال الوقت ويصر الناس على أنهم لا يستطيعون تبرير التنفيذ بشكل جيد ، حيث يرغب الأشخاص في استخدامه ، وهذا أحد المبررات التي يمكنني أيضًا إدراجها في قائمة المشكلات التي تم إغلاقها والتي تطلب نفس الشيء xD. لقد وجدت أيضًا واحدًا يبرر حالة الاستخدام جيدًا ويشير إلى مواصفات es6 عندما يتعلق الأمر بترتيب الخريطة -> لا يزال مغلقًا.

الأشخاص الذين يرغبون في استخدام ميزة ليس ، في حد ذاته ، حجة يمكن أن تبرر الحاجة إلى وجود مثل هذه الميزة ، فمن الضروري الموازنة بين التكلفة والفوائد (ما هي المشكلة التي يتم حلها) لإضافة هذه الميزة

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

إذا كنت ترغب في مناقشة قضية معينة ، يرجى الارتباط بها.

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

من المهم أن تكون قادرًا على التكرار عبر التكرارات في الحلقات. هذا يبدو واضحًا بوضوح. إنها سمة أساسية للغة.

أسباب دعمها هي:

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

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

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

أفترض أن استخدام Array.from () داخل دالة محسوبة يجب أن يكون أفضل صديق لك في الوقت الحالي. :خائب الامل:

أي حل لذلك؟

تحديث صغير ، سيحدث هذا إذا / عندما يقرر Vue إسقاط المتصفحات "القديمة" وسوف ينتقل إلى المتصفحات دائمة الخضرة باستخدام Proxy بدلاً من set / get للتفاعل.

@ alexsandro-xpt ، ما عليك سوى استخدام دالة محسوبة تُرجع Array.from(yourDataSet) .

nickmessing أحاول مع الخريطة ، لا يعمل.
دائمًا ما تكون قيمة طول الصفيف المحسوبة 0.

فقط Array.from ليس الحل الذي تريده بسبب نقص التفاعل (التغييرات إلى yourDataSet لن يتم نشرها إلى Vue).

كما ذكرنا سابقًا ، لا يمكن ملاحظة المجموعات والخرائط بواسطة Vue. من أجل استخدام تلك - إما في v-for ، أو في الخصائص المحسوبة ، والأساليب ، والمراقبون ، وتعبيرات القوالب ، وما إلى ذلك - تحتاج إلى إنشاء نسخة متماثلة قابلة للتسلسل من هذا الهيكل وتعريضه لـ Vue. إليك مثال ساذج يستخدم عدادًا بسيطًا لتزويد Vue بالمعلومات التي تم تحديث Set:

data() {
  mySetChangeTracker: 1,
  mySet: new Set(),
},

computed: {
  mySetAsList() { 
    // By using `mySetChangeTracker` we tell Vue that this property depends on it,
    // so it gets re-evaluated whenever `mySetChangeTracker` changes
    return this.mySetChangeTracker && Array.from(this.mySet);
  },
},

methods: {
  add(item) {
    this.mySet.add(item);
    // Trigger Vue updates
    this.mySetChangeTracker += 1;
  }
}

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

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

@ alexsandro-xpt ، آسف ، لقد كنت مخطئًا ، سيكون الحساب الحساس متطرفًا كما قال اختراق آخر سيكون باستخدام $forceUpdate مع طريقة ، إليك مثال كمان

شكرًا لك nickmessing و inca ، هذا يعمل بشكل جيد مع new Map() !!

الآن عندما تقوم بعمل "v-for" على "Map" ، فإن v-for يعمل كما لو أنه تلقى مصفوفة فارغة.

بغض النظر عن نتيجة المناقشة الموسعة حول ما إذا كان / كيفية دعم الخرائط والمجموعات ، فإنه سيوفر الكثير من وقت تصحيح الأخطاء إذا حذر Vue ببساطة "الخرائط والمجموعات غير مدعومة بعد - راجع https: // github .com / vuejs / vue / issues / 2410 ".

نعم ، لقد أوصلني بحث Google عن هذه الميزة إلى هذه التذكرة (بعد بعض الخلط المزعج مع Vue.set)

👍 يجب أن يكون هذا في v-for documents!

حقًا ، يجب أن تكون في v-for documents!

/ ccchrisvfritz ، لنحاول إضافة ملاحظة حول دعم هذه الأنواع في المستندات مقابل v-for (كلاً من واجهة برمجة التطبيقات وقسم عرض القائمة) - سألقي نظرة عليها أيضًا في 2.5.

@ yyx990803 أتساءل عما إذا كان تحذير وحدة التحكم سيكون أفضل لهذا ، حيث أن ذلك سيخبر الناس بالخطأ على الفور ، مع تجنب الحاجة إلى البحث عن الحل.

نحن أيضًا صريحون جدًا في المستندات حول الأنواع التي _do_ ندعمها ، و Map و Set ليس بينهم. أستطيع بالتأكيد أن أرى الحجة التي تفسر لماذا يمكن أن تعمل جميع العناصر التكرارية مع v-for ، لكنني لا أعتقد أننا نعطي القراء حاليًا أي سبب لتوقعهم.

لا أرى الحجة ضد إضافة دعم لـ Set .

يمكن تعبئة Set نفسه بشكل نظيف ، وما لم أفقد شيئًا ما ، يبدو أن نهج Vue لإضافة التفاعلية إلى المصفوفات يمكن أن يمتد بسهولة إلى مجموعات. سنحتاج فقط إلى التفاف .add() و .clear() و .delete() .

أفضل تخمين لدي (الرجاء التصحيح / آسف إذا كنت مخطئًا): الجزء الأصعب هو التفاف مُنشئ Set ، والذي يقبل التكرار. لا أرى كيف يمكن جعل التكرار قابلاً للملاحظة ، لأنه في شكله العام هو مجرد وظيفة (على سبيل المثال next ) بدون حالة يمكن الرجوع إليها (فكر في المكرر المستند إلى المولد كمثال).

لماذا نحتاج إلى التفاف المنشئ؟ ألن نقوم بتمرير المجموعات الموجودة مسبقًا إلى Vue؟

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

في هذا الصدد ، يجب ألا يختلف Set تم إنشاؤه من مكرر عن مصفوفة تم إنشاؤها من مكرر (عبر Array.from() ) ، والتي يدعمها Vue بالفعل.

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

هذا ليس جيدا. لا يمكنك فعل ذلك

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

var map = new Map()
  map.set('key1','Test1')
  map.set('key2','Test2')

        <div class="file-size">{{value}}</div>
 </div>

لا ، لا تظهر على الصفحة

حريصون على دعم هذا:)

أنا أيضا

أي خطط مستقبلية لإضافة الدعم؟ هل هناك سبب تقني لعدم تمكن Vue من دعم Map and Set؟

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

يتأثر أداء العرض بشدة عندما تحتوي خريطة مثل المجموعة على مئات من المفاتيح. على سبيل المثال ، في مشروعي يتم تشغيل آلاف المشتركين عند إضافة عنصر واحد إلى الخريطة باستخدام عملية Vue.set:

Vue.set(state.items, itemId, item); // where items is a plain object.

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

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

هل هناك أي أخبار حول الخطط المستقبلية وربما حول الدعم الأصلي Map/Set ؟

توضح هذه المقالة تفاصيل الدعم القادم في الإصدار 2.6 - ولكن لا يوجد شيء بخصوص ذلك في خارطة الطريق الرسمية مما يمكنني رؤيته؟

https://medium.com/@alberto.park/the -status-of-javascript-libraries-libraries-2018-بعد-3a5a7cae7513

"الإصدار الأخير الحالي من النواة هو 2.5.x. الإصدار الثانوي التالي (الإصدار 2.6) ، سيدعم استيراد ESM الأصلي ، وتحسين معالجة الأخطاء غير المتزامن ، ومكرر على التوجيه" v-for "والمزيد."

لست متأكدا من أين حصلوا على هذه المعلومات؟

تم العثور على هذه المشكلة أثناء تصحيح أخطاء سلوك Vue عبر كائنات بيانات Set . : التفكير:

بالنسبة للأشخاص مثلي الذين كانوا يتساءلون عن خارطة الطريق لهذا ، يقول Evan You في هذا الفيديو أن دعم Map and Set "من المحتمل" أن يصل في 2.6 ، لكن ذلك كان في مايو ، لذلك هذا كل ما أعرفه.

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

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

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

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

هذا مخطط لـ vue.js v3.0.
قارن: https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf

هل هذا مدعوم الآن في Vue3 (أي ، رد الفعل Map و Set )؟