Vue: روابط التوجيه المخصص تختلف في المكونات مقابل العناصر

تم إنشاؤها على ١٥ أبريل ٢٠١٩ · 6تعليقات · مصدر: vuejs/vue

الإصدار

2.6.10

رابط الاستنساخ

https://jsfiddle.net/bponomarenko/uom10qd2/

خطوات التكاثر

افتح وحدة تحكم المتصفح.
انقر فوق الزر "تبديل" مرتين.

ما هو متوقع؟

سيصدر التوجيه نفس رسائل وحدة التحكم عند تطبيقه على عناصر DOM والمكونات (في init وبعد النقر فوق الزر).

لست متأكدًا مما ينبغي توقعه الناتج. إما

bind: first comp
bind: first elem
unbind: first comp
unbind: first elem
bind: first comp
bind: first elem

أو

bind: first comp
bind: first elem
unbind: second comp
unbind: second elem
bind: first comp
bind: first elem

ما الذي يحدث بالفعل؟

الرسائل من التوجيه هي نفسها في init ، لكنها مختلفة بعد النقر فوق الزر.

خرج وحدة التحكم الفعلي:

bind: first comp
bind: first elem
unbind: first comp
unbind: second elem
bind: second comp
bind: first elem

يبدو أن ترتيب تطبيق التوجيهات على عناصر ومكونات DOM مختلف. في الإعداد لدي توجيه مخصص يعتمد على بعض سمات DOM مع بيانات التكوين. عندما يكون هذا التوجيه المخصص مرتبطًا / غير منضم في "تدفق منتظم" - يعمل كل شيء كما هو متوقع (يرتبط التوجيه بعد تحديث سمات العنصر). ومع ذلك ، عندما يكون التوجيه مرتبطًا / غير منضم في حالة Vue "in-place patch strategey" ، يبدو السلوك مختلفًا.

bug has workaround

مصدر

bponomarenko

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

يبدو أن الأمر يُستدعى بالمكوِّن القديم (لأنه يُعاد استخدامه) لكنه لا يزال يحتوي على attrs

كحل بديل ، قم بتعيين مفتاح على أحد المكونات

posva في ١٥ أبريل ٢٠١٩

👍2 🚀1

ال 6 كومينتر

يبدو أن الأمر يُستدعى بالمكوِّن القديم (لأنه يُعاد استخدامه) لكنه لا يزال يحتوي على attrs

كحل بديل ، قم بتعيين مفتاح على أحد المكونات

posva في ١٥ أبريل ٢٠١٩

👍2 🚀1

bponomarenko
ما قالتهposva مغطى بالفعل في الوثائق.
يمكنك الرجوع إلى هذا.

https://vuejs.org/v2/guide/conditional.html#Controlling -Reusable-Elements-with-key

pistis في ١٥ أبريل ٢٠١٩

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

bponomarenko في ١٦ أبريل ٢٠١٩

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

Justineo في ١٦ أبريل ٢٠١٩

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

bponomarenko في ١٦ أبريل ٢٠١٩

👍1