في اليوم الآخر ، واجهت مثل هذه المشكلة. رفض كود تم إنشاؤه من جانب الخادم الترطيب في Safari.
يشير الترطيب إلى عملية من جانب العميل يأخذ Vue خلالها HTML الثابت الذي يرسله الخادم ويحوله إلى DOM ديناميكي يمكنه الاستجابة لتغيرات البيانات من جانب العميل. مزيد من التفاصيل هنا .
سقط "Prod" للتو ، وأفادت نسخة مطور البرامج بوجود اختلافات في Dom. وبما أن نسخة مطور البرامج لا تتعطل عند محاولة ترطيبها ، ولكن يتم الإبلاغ عنها فقط في وحدة التحكم ، لم يكن الخطأ واضحًا ، وبينما وجدناها ، مرت فترة طويلة.
استراتيجية مثيرة للاهتمام للغاية من Vue هي انتظار الإنتاج والوقوع هناك!
خمسمائة مكون من مكونات مختلفة التعقيد لم يبسط المهمة. ونتيجة لذلك ، تمكنت من رؤية المشكلة والعثور على جهاز مناسب وتكوين صداقات مع وحدة تحكم المطور.
ونتيجة لذلك ، تبين أن تطبيقنا يتعطل عند توصيل مكون التذييل. وعندما وجدوا الخط الصحيح ، لم يصدقوا ببساطة أعينهم. يتوقع أي شيء سوى هذا.
اتضح أنه عند حذف رقم الهاتف ، حدث الترطيب دون مشاكل. عندما بدأوا في الحفر ، اتضح أن Safari ، بعد تلقي تنسيق html ، استبدل علامة بجوار الهاتف ، مما تسبب في الواقع في برنامج الاتصال.
بطبيعة الحال ، عندما بدأ الترطيب ، لم يتطابق نطاق الصفحة الذي جاء من الخادم مع الصفحة الافتراضية المبنية حديثًا. تعطل التطبيق دون إعلان الحرب.
تم حل هذه المشكلة أيضًا بشكل غير متوقع. حتى الآن ، أدخلنا الهاتف بالطريقة المعتادة:
<div>8 (800) 111 2 333</div>
كان الحل ملزماً لنص v:
<div v-text=”8 (800) 111 2 333”></div>
لدي نظرية حول هذا. إذا كان بإمكان شخص ما تأكيده أو دحضه (اقتراح واحد جديد) ، فسأكون ممتنًا جدًا. كما أفهمها ، بعد أن استلم Safari المستند ، قام Vue ببناء دوم افتراضي ومقارنته بهذا المستند وبينما يقوم بترطيب هذا المستند ، يقوم Safari بعمله المظلم ويغير الهاتف إلى رابط. عندما يتعلق الأمر بهذا المجال ، يستبدل Vue بالنص v مرة أخرى محتويات div بما نحتاجه. ونتيجة لذلك ، في وقت المقارنة ، تتزامن القباب ، تكون الرحلة طبيعية.