شارك بعض الأسئلة المختارة لمقابلة الواجهة الأمامية للويب والتي تستحق جمعها (مع الإجابات)

تلخص هذه المقالة بعض الأسئلة المختارة لمقابلة الواجهة الأمامية للويب والتي تستحق جمعها (مع الإجابات). لها قيمة مرجعية معينة يمكن للأصدقاء المحتاجين الرجوع إليها وآمل أن تكون مفيدة للجميع.

أسئلة مقابلة JS

1. نوع البيانات شبيبة

أنواع البيانات الأساسية: رقم، سلسلة، منطقية، خالية، غير محددة، رمز، كائن أنواع البيانات المرجعية الكبيرة، صفيف، تاريخ، وظيفة، RegExp

2. تحسين متغيرات js وإعلانات الوظائف

في js، سيتم ترقية إعلان المتغيرات والوظائف إلى الأعلى. يتم ترقية وظيفة التنفيذ إلى أعلى من المتغير. إذا تم الإعلان عن متغير خارجي يحمل نفس الاسم مع var داخل الوظيفة، فلن تبحث الوظيفة بعد الآن. لا يتم رفع الوظائف المجهولة.

3. الإغلاق

الإغلاق هو دالة يمكنها قراءة المتغيرات الداخلية للوظائف الأخرى. الإغلاق هو في الأساس دالة تُرجع دالة المزايا: يمكنها قراءة المتغيرات داخل الوظيفة والاحتفاظ بالمتغيرات في الذاكرة الأساليب الخاصة للكائن العيوب: الاستخدام غير السليم للذاكرة يمكن أن يسبب مشاكل في تجاوز سعة الذاكرة

4. الفرق بين == و ===

== متساوية بالمعنى غير الصارم. إذا كانت القيم متساوية، فستتم مقارنة نوع البيانات وحجم القيمة والمرجع سيكون العنوان متساويًا فقط إذا كانا متساويين.

5. هذا

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

6. كيفية اجتياز صفائف وكائنات JS

لinforforEachfor-of

7. الفرق بين الخريطة وforEach

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

8. ما الفرق بين وظائف السهم والوظائف العادية؟

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

9. نفس استراتيجية الأصل

يشير التماثل إلى نفس اسم المجال والبروتوكول ورقم المنفذ.

10. كيفية حل المشكلات العابرة للمجالات

jsonp cross-domain document.domain + iframe cross-domainNodejs الوسيطة الوكيل عبر المجال الخلفية تحدد اسم المجال الآمن في معلومات الرأس

11. قيود الوضع الصارم

يجب الإعلان عن المتغيرات قبل استخدام الدالة. لا يمكن أن تحتوي المعلمات على سمات بنفس الاسم، وإلا سيتم الإبلاغ عن خطأ لا يمكن استخدام العبارة with لمنع الإشارة إلى الكائن العام.

12. الجديد في es6

دالة سهم سلسلة القالب الجديدة for-of (تُستخدم لاجتياز البيانات - مثل القيم الموجودة في مصفوفة.) يدمج ES6 كائنات Promise في المواصفات ويوفر كائنات Promise الأصلية. تمت إضافة أوامر Let وconst للإعلان عن المتغيرات. هناك أيضًا مقدمة لمفهوم الوحدة النمطية

13. ما الفرق بين الصفة والملكية؟

السمة هي السمة التي يمتلكها عنصر dom كعلامة html في المستند. الخاصية هي السمة التي يمتلكها عنصر dom ككائن في js. بالنسبة للسمات القياسية لـ html، تتم مزامنة السمة والخاصية وسيتم تحديثهما تلقائيًا، ومع ذلك، بالنسبة للسمات المخصصة، لا تتم مزامنتهما.

14. ما الفرق بين Let و const؟

لا يوجد ترقية متغيرة في أمر Let، إذا تم استخدامها قبل السماح، فسيتم الإبلاغ عن خطأ. إذا كانت هناك أوامر Let وconst في منطقة الكتلة، فسيتم تشكيل نطاق مغلق ولن يُسمح بالإعلانات المتكررة ولا يمكن تعديلها، ومع ذلك، إذا كان التعريف هو كائن، فيمكنك تعديل البيانات الموجودة داخل الكائن

15. تسرب الذاكرة

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

16. كيفية تقديم السيناريو؟

يقدم html static <script> إدراجًا ديناميكيًا لـ js <script><script defer>: تحميل غير متزامن، يتم تنفيذه بعد اكتمال تحليل العنصر <script async>: تحميل غير متزامن، ولكن سيتم حظر عرض العنصر أثناء التنفيذ

17. طريقة الصفيف

الخريطة: اجتياز المصفوفة وإرجاع مصفوفة جديدة مكونة من قيم إرجاع رد الاتصال لكل منها: غير قادر على الانفصال، يمكنك استخدام خطأ جديد في المحاولة/الالتقاط لإيقاف التصفية: تصفية بعض: إذا عاد عنصر واحد صحيحًا، يكون الكل صحيحًا: إذا قام عنصر واحد بإرجاع false، فإن القيمة الإجمالية هي falsejoin: قم بإنشاء سلسلة عن طريق تحديد الموصل Push/pop: Push and pop في النهاية، وقم بتغيير المصفوفة الأصلية، وقم بإرجاع عنصر الدفع/pop unshift/shift: Push and pop at الرأس، تغيير المصفوفة الأصلية، إرجاع فرز عناصر العملية (fn) / عكس: فرز وعكس، تغيير المصفوفة الأصلية: قم بتوصيل المصفوفة، دون التأثير على المصفوفة الأصلية، شريحة نسخة ضحلة (بداية، نهاية): إرجاع صفيف جديد مبتور، دون تغيير لصق الصفيف الأصلي (بدء، رقم، قيمة...): إرجاع صفيف يتكون من عناصر محذوفة، القيمة هي العنصر المدرج، تغيير فهرس الصفيف الأصلي / lastIndexOf (القيمة، من إندكس): العثور على عنصر المصفوفة ويعيد الحرف المنخفض المقابل لتقليل / تقليلRight(fn(prev, cur), defaultPrev): يتم تنفيذه في أزواج، prev هي القيمة المرجعة لآخر وظيفة مبسطة، cur هي القيمة الحالية (بدءًا من العنصر الثاني)

18. نسخة جافا سكريبت العميقة والسطحية؟

يمكن حل النسخة الضحلة Object.sign نسخة عميقة بواسطة JSON.parse(JSON.stringify(object))

19. تحدث عن تنفيذ البرمجة غير المتزامنة؟

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

20. تحدث عن أفكار البرمجة الشيئية؟

الفكرة الأساسية هي استخدام المفاهيم الأساسية مثل الكائنات والفئات والميراث والتغليف لتصميم البرامج. المزايا هي سهولة الصيانة والتوسيع، وقابلية إعادة الاستخدام العالية ووراثة أعمال التطوير، وتقليل عبء العمل من الازدواجية. دورة تطوير مختصرة

21. تحسين أداء المشروع

قلل عدد طلبات HTTP. استخدم CDN لتجنب التحميل البطيء. قلل عدد عناصر DOM. استخدم JavaScript وCSS لضغط JavaScript وCSS والخطوط والصور. تحسين CSS Sprite. استخدم iconfont للتوزيع متعدد النطاقات وتقسيم المحتوى إلى أسماء نطاقات مختلفة قدر الإمكان. من الصفحة.

22. ما هو الخيط المفرد وعلاقته بالغير المتزامن؟

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

23. تحدث عن موازنة التحميل؟

تعمل الخوادم الفردية معًا لمنع واحد أو عدد قليل منها من العمل الزائد، وتعظيم دور الخادم وموازنة التحميل لإعادة توجيه http: يختار المجدول الخادم وفقًا للسياسة للرد على الطلب بـ 302. العيب هو أنه يكون له تأثير فقط في المرة الأولى والعمليات اللاحقة. الحفاظ على موازنة تحميل نظام أسماء النطاقات على هذا الخادم: عند حل أسماء النطاقات، قم بالوصول إلى أحد خوادم IP المتعددة (ضعف إمكانية المراقبة) السبب - تجنب تعارضات عرض DOM عكس موازنة تحميل الوكيل: الوصول إلى خادم موحد، ويقوم الخادم بجدولة الوصول. ويتطلب الخادم الفعلي خادمًا موحدًا، ويتأثر أدائه بعدد مجموعات الخادم.

24. سلسلة النطاق؟

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

25. ما هي النماذج الأولية وسلاسل النماذج الأولية والميراث؟

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

26. ما هي آلية جمع القمامة في JS؟ 1. نظرة عامة

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

2. دورة حياة المتغيرات

عندما تنتهي دورة حياة المتغير، سيتم تحرير الذاكرة التي يشير إليها. لدى JS نوعان من المتغيرات، المتغيرات المحلية والمتغيرات العامة لها تأثير في وظيفتها الحالية. عند انتهاء الوظيفة، سيتم تحرير المتغيرات العامة حتى يتم إغلاق المتصفح.

3. هناك طريقتان لجمع البيانات المهملة في js: مسح العلامات وحساب المراجع.

مسح العلامات: تستخدم معظم المتصفحات هذا النوع من جمع البيانات المهملة، عندما يدخل متغير إلى بيئة التنفيذ (يعلن عن المتغير)، يقوم جامع البيانات المهملة بوضع علامة على المتغير عندما يغادر البيئة، ثم يتم حذفه.

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

27. التعزيز التدريجي والانحطاط الرشيق

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

أسئلة المقابلة

1. مزايا الرؤية

خفيفة الوزن، سريعة، سهلة التعلم، اقتران منخفض، قابلة لإعادة الاستخدام، تطوير مستقل

الوثائق كاملة والوثائق باللغة الصينية

2. يقوم المكون الأصلي Vue بتمرير البيانات إلى المكونات الفرعية

الدعائم

3. تقوم المكونات الفرعية بتمرير الأحداث إلى المكونات الأصلية

$تنبعث

4. النقاط المشتركة والاختلافات بين تعليمات v-show وv-if

نقاط مماثلة: يمكن لكل منهما التحكم في عرض وإخفاء عناصر DOM.

الفرق: v-show يغير فقط سمة العرض، ولا يختفي عنصر dom، وليست هناك حاجة لإعادة عرض الصفحة عند التبديل.

v-إذا قام بحذف عنصر dom مباشرة من الصفحة، يتطلب التبديل مرة أخرى إعادة عرض الصفحة.

5. كيفية جعل CSS يعمل فقط في المكون الحالي

نطاق

6. ما هي وظيفة <البقاء على قيد الحياة></البقاء على قيد الحياة>؟

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

7. كيفية الحصول على الدوم

أضف ref='refname' إلى عنصر dom، ثم احصل على عنصر dom من خلال هذا.$refs.refname

8. قم بتسمية عدة تعليمات في Vue واستخدامها

نموذج v

الخامس على

v-html

نص v

مرة واحدة

الخامس-إذا

v-show

9. ما هو محمل vue؟ ما هو استخدامه ل؟

أداة تحميل لملفات vue التي تحول القالب/js/style إلى وحدات js

الغرض: يمكن لـ Js كتابة es6 وأنماط النمط

10. لماذا نستخدم المفتاح؟

أضف مفتاحًا كمعرف فريد لكل عنصر من عناصر DOM. يمكن لخوارزمية الاختلاف تحديد هذه العقدة بشكل صحيح وجعل عرض الصفحة أسرع.

11. المحاور والتركيب؟

مطلوب البرنامج الإضافي axios عند استخدام ajax في مشروع vue

طريقة التنزيل cnpm install axios --save

12. استخدام نموذج v

يتم استخدام نموذج v للربط ثنائي الاتجاه للنماذج ويمكنه تعديل البيانات في الوقت الفعلي.

13. من فضلك أخبرني عن استخدام كل مجلد وملف في دليل src في مشروع vue.cli.

مكونات تخزين المكونات

مدخل الصفحة الرئيسية لـ app.vue

إدخال الملف الرئيسي Index.js

يقوم الحمار بتخزين ملفات الموارد الثابتة

14. صف بإيجاز سيناريوهات استخدام المحسوبة والمراقبة على التوالي.

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

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

15. هل يستطيع v-on مراقبة طرق متعددة؟

نعم، على سبيل المثال v-on="onclick,onbure"

16. استخدام $nextTick

بعد التعديل في data()، لا يمكن الحصول على البيانات المعدلة في الصفحة. عند استخدام $nextTick، عندما يتم تعديل البيانات الموجودة في البيانات، يمكن عرض الصفحة في الوقت الفعلي.

17. لماذا يجب أن تكون البيانات الموجودة في مكون Vue وظيفة؟

بسبب خصائص JavaScript، يجب أن تكون البيانات في المكون موجودة في شكل دالة ولا يمكن أن تكون كائنًا.

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

18. فهم الإطار التقدمي

الدعوة على الأقل

يمكن اختيار مستويات مختلفة وفقًا للاحتياجات المختلفة

19. كيف تقوم Vue بتنفيذ ربط البيانات ثنائي الاتجاه؟

يتم تنفيذ ربط بيانات Vue ثنائي الاتجاه من خلال وضع اختطاف البيانات والجمع والاشتراك، وهذا يعني أنه عندما تتغير البيانات، يتغير العرض وفقًا لذلك .

النواة: فيما يتعلق بربط بيانات vue ثنائي الاتجاه، فإن جوهرها هو طريقة Object.defineProperty()

20. الاختلافات والعيوب بين تطبيقات الصفحة الواحدة والتطبيقات متعددة الصفحات

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

تعني الصفحات المتعددة (MPA) وجود صفحات متعددة في التطبيق، ويتم تحديث الصفحة بأكملها عندما تقفز الصفحة.

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

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

21. لماذا من الضروري كتابة المفتاح في مكون القائمة في مشروع Vue، وما هي وظيفته؟ المفتاح هو المعرف الفريد الممنوح لكل عقدة vnode. يمكنك الاعتماد على المفتاح للحصول على عقدة vnode المقابلة في oldVnode بشكل أكثر دقة وأسرع.

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

22. ما هو ترتيب تنفيذ خطافات دورة الحياة للمكونات الأصلية والمكونات الفرعية؟

عملية تقديم التحميل

الأصل قبل الإنشاء -> الأصل الذي تم إنشاؤه -> الأصل قبل التركيب -> الطفل قبل الإنشاء -> الطفل الذي تم إنشاؤه -> الطفل قبل التركيب -> الطفل المثبت -> الأصل المثبت

عملية تحديث المكون الفرعي

الأصل قبل التحديث -> الطفل قبل التحديث -> تحديث الطفل -> تحديث الأصل

عملية تحديث المكون الأصلي

الأصل قبل التحديث -> تحديث الأصل

عملية التدمير

الوالد قبل التدمير -> الطفل قبل التدمير -> الوالد المدمر -> الوالد المدمر

23. أخبرني عن فهمك لـ nextTick؟ عند تعديل قيمة البيانات ثم الحصول على قيمة عنصر dom على الفور، لا يمكنك الحصول على القيمة المحدثة، تحتاج إلى استخدام رد الاتصال $nextTick للسماح بعرض قيمة البيانات المعدلة وتحديثها إلى عنصر dom قبل الحصول عليها بنجاح. .

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

25. يستخدم الفرق بين vue وjQuery المحدد ($) لتحديد كائنات DOM وتنفيذ عمليات مثل التعيين واكتساب القيمة وربط الأحداث وما إلى ذلك. في الواقع، الفرق الوحيد عن HTML الأصلي هو أنه يمكن استخدامه بسهولة أكبر. تحديد كائنات DOM وتشغيلها، بينما تعمل البيانات والواجهة معًا. على سبيل المثال، إذا كنت بحاجة إلى الحصول على محتوى علامة التصنيف: $("lable").val();، فسيظل ذلك يعتمد على قيمة عنصر DOM. يفصل Vue البيانات تمامًا عن العرض من خلال كائنات Vue. للعمل على البيانات، لم تعد بحاجة إلى الرجوع إلى كائن DOM المقابل، ويمكن القول أن البيانات والعرض منفصلان عن بعضهما البعض من خلال كائن Vue. هذا هو MVVM الأسطوري.

26. الفرق بين الحذف وVue.delete في حذف المصفوفة، يؤدي الحذف إلى تغيير العناصر المحذوفة إلى فارغة/غير محددة، وتظل القيم الأساسية للعناصر الأخرى دون تغيير. يقوم Vue.delete بحذف المصفوفة مباشرةً وتغيير القيمة الأساسية للمصفوفة.

27. كيفية حل مشكلة التحميل البطيء لشاشة SPA الأولى عن طريق تثبيت المكونات الإضافية المطلوبة للتحميل الديناميكي البطيء، واستخدام موارد CDN.

28. هل يقوم مشروع Vue بتجميع ملف js واحد أو ملف css واحد أو ملفات متعددة؟ وفقًا لمواصفات سقالات vue-cli، ملف js واحد وملف CSS واحد.

29. طرق تشغيل تحديثات العرض عندما يقوم vue بتحديث المصفوفة Push();

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

31. ما هي الخطافات التي سيتم تشغيلها عند تحميل الصفحة لأول مرة؟ قبل الإنشاء، تم إنشاؤه، قبل التحميل، تم تركيبه

32. يحصل Vue بشكل عام على البيانات التي يتم فيها إنشاء وظيفة الفترة قبل تثبيت Mount

33. الفرق بين الإنشاء والتركيب: تم ​​الإنشاء: يتم استدعاؤه قبل عرض القالب إلى html، أي أنه عادةً ما تتم تهيئة قيم سمات معينة ثم يتم عرضها في طريقة عرض. مُثبت: يتم استدعاؤه بعد تحويل القالب إلى HTML، عادةً بعد اكتمال صفحة التهيئة، ثم تنفيذ بعض العمليات المطلوبة على عقدة DOM الخاصة بـ HTML.

34. ينقسم فهم دورة حياة Vue إلى 8 مراحل: قبل/بعد الإنشاء، قبل/بعد التحميل، قبل/بعد التحديث، وقبل/بعد التدمير. قبل/بعد الإنشاء: في مرحلة ما قبل الإنشاء، يكون عنصر التثبيت $el وبيانات كائن البيانات الخاصة بمثيل vue غير محددين ولم تتم تهيئتهما. في المرحلة التي تم إنشاؤها، تكون بيانات كائن البيانات الخاصة بمثيل vue متاحة، ولكن $el ليس كذلك. قبل/بعد التحميل: في مرحلة beforeMount، تتم تهيئة $el وبيانات مثيل vue، لكن عقدة dom الافتراضية السابقة لا تزال مثبتة، ولم يتم استبدال data.message. في مرحلة التثبيت، تم تثبيت مثيل vue وتم عرض data.message بنجاح. قبل/بعد التحديث: عندما تتغير البيانات، سيتم تشغيل طريقتي قبل التحديث والتحديث. قبل/بعد التدمير: بعد تنفيذ طريقة التدمير، لن تؤدي التغييرات في البيانات إلى تشغيل الوظيفة الدورية، مما يشير إلى أن مثيل Vue قد أصدر مراقبة الأحداث وربطها بـ DOM، لكن بنية DOM لا تزال موجودة.

35. ما هو الرؤيا؟ إدارة الدولة في إطار الرؤية.

36. ما هي صفات vuex؟ هناك خمسة أنواع، الحالة، Getter، الطفرة، الإجراء، حالة الوحدة النمطية: البيانات الأساسية (موقع تخزين مصدر البيانات) getters: طفرات البيانات المستمدة من البيانات الأساسية: طرق إرسال البيانات المتغيرة، والمزامنة! الإجراءات: مثل الديكور، يتم تغليف الطفرات بحيث تكون غير متزامنة. الوحدات: وحدات Vuex

37. دلو عائلة vue vue-cli, vuex, vueRouter, Axios

38. ما هي أوامر npm شائعة الاستخدام في مشاريع vue-cli؟

تثبيت npm هو أمر تنزيل حزمة مواردNode_modules. npm run dev هو أمر npm لبدء بيئة تطوير vue-cli. npm run build vue-cli هو أمر npm لإنشاء موارد نشر بيئة الإنتاج. يتم استخدام التقرير لعرض ملفات موارد نشر بيئة الإنتاج vue-cli

39. من فضلك قل لي الغرض من كل مجلد وملف في مشروع vue-cli؟

يقوم مجلد البناء بتخزين بعض التكوينات الأولية لحزمة الويب. يحفظ مجلد التكوين بعض تكوينات تهيئة المشروع.node_modules هي الوحدة التي يعتمد عليها المشروع والتي تم تحميلها بواسطة npm .vue هو ملف إدخال المشروع main.js للملف الأساسي للمشروع

40. ما الفرق بين v-if وv-show؟

القاسم المشترك بينهم: أنهم جميعًا يعرضون عناصر DOM ديناميكيًا. الاختلافات: v-if يضيف أو يحذف عناصر DOM ديناميكيًا في شجرة DOM، ويتحكم v-show في العرض والإخفاء عن طريق تعيين سمة نمط العرض لعنصر DOM. إذا كانت المحولات تحتوي على عملية تجميع جزئية / إلغاء التثبيت، فقم بتدمير وإعادة بناء مستمعي الأحداث الداخلية والمكونات الفرعية بشكل صحيح أثناء عملية التبديل، v-show هو مجرد استهلاك أداء تبديل بسيط يعتمد على css v-إذا كان لديه تكلفة تحويل أعلى. تكلفة عرض أولية أعلى السيناريو v-if مناسب لظروف التشغيل التي من غير المرجح أن تتغير v-show مناسب للتبديل المتكرر

41. ما هي أولويات v-for و v-if عند استخدام v-for و v-if في نفس الوقت، فإنهما يتمتعان بأولوية تشغيل واحدة تلو الأخرى أكثر من v-. إذا، مما يعني أن v-for له أولوية أعلى من v-if، ويتم استدعاء حكم v-if في كل مرة في كل مهمة حلقة، لذلك لا يوصى باستخدام v-if وv-for في نفس الوقت. في نفس التسمية.

42. المعدلات شائعة الاستخدام في معدّلات الأحداث؟

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

المعدلات للنموذج v

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

معدّل أحداث لوحة المفاتيح

.enter.tab.delete (يلتقط مفاتيح "delete" و"backspace").esc.space.up.down.left.right

معدّل النظام

.ctrl.alt.shift.meta

تعديل زر الماوس

.left.right.middle

43. كيفية استخدام كائنات الحدث في أحداث vue؟

احصل على كائن الحدث وقم بتمرير $event كمعلمة للطريقة. لاحظ أنه يتم استخدام الرمز $ في الحدث <button @click="Event($event)">كائن الحدث</button>

44. ما هي طرق نقل قيمة المكون؟

التمرير من الأصل إلى الطفل: يتلقى المكون الفرعي قيمة السمة xx التي تم تمريرها بواسطة المكون الأصلي من خلال Props['xx'] التمرير من الطفل إلى الأصل: يقوم المكون الفرعي بتمريرها من خلال this.$emit('fnName',value) ويستقبل المكون الأصلي حدث fnName طرق أخرى لتلقي عمليات الاسترجاعات: عن طريق إنشاء ناقل وتمرير القيم باستخدام Vuex

45. كيف يمكن للمكون الفرعي استدعاء المكون الأصلي في Vue؟

قم باستدعاء طريقة المكون الأصلي مباشرة من خلال this.$parent.event في المكون الفرعي. استخدم $emit() في المكون الفرعي لتشغيل حدث للمكون الأصلي، ويمكن للمكون الأصلي الاستماع إلى هذا الحدث. يقوم المكون الأصلي بتمرير الطريقة إلى المكون الفرعي، ويتم استدعاء الطريقة مباشرة في المكون الفرعي.

46. ​​كيف يمكن جعل CSS يعمل فقط في المكون الحالي؟ أضف نطاقًا أمام النمط في المكون

47. كيفية الحصول على dom?ref=domName الاستخدام: this.$refs.domName

48. قفزة التوجيه vue

(1) رابط توجيه الملاحة التعريفي

بدون معلمات: // ملاحظة: إذا كان الرابط في رابط جهاز التوجيه يبدأ بـ "/"، فإنه يبدأ من المسار الجذر إذا لم يبدأ بـ "/"، فإنه يبدأ من المسار الحالي. <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> // كلا الاسم والمسار مقبولان مع المعلمات:< router-link :to="{name:'home'، المعلمات: {id:1}}"><router-link :to="{name:'home'، الاستعلام: {id:1} }"> < router-link :to="/home/:id"> // نقل الكائن<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}} "></ رابط جهاز التوجيه>

(2) هذا.$router.push()

بدون معلمات: this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})معلمة الاستعلام 1. تكوين التوجيه: الاسم: 'home'، المسار: '/home' 2. الانتقال السريع: this.$router.push({name:'home',query: {id:'1'}})this.$ router.push ({path:'/home',query: {id:'1'}})3. الحصول على المعلمات معلمات html: معلمات $route.query.idscript: معلمات this.$route.query.idparams 1. تكوين التوجيه: الاسم : 'home'، المسار: '/home/:id' (أو المسار: '/home:id') 2. الانتقال السريع: this.$router.push({name:'home', params: {id:'1 '}}) ملاحظة: // يمكنك فقط استخدام الاسم لمطابقة المسارات ولا يمكنك استخدام المسار // المعلمات لتمرير المعلمات (مشابه للنشر) مسار تكوين التوجيه: "/home/:id" أو المسار: "/home :id " وإلا ستختفي معلمة التحديث 3. احصل على معلمة html المعلمة: $route.params.id معلمة البرنامج النصي: this.$route.params.id قم بتمرير المعلمة مباشرة عبر المسار 1. تكوين المسار: الاسم: 'home'، المسار: '/home/:id' 2. الانتقال السريع: this.$router.push({path:'/home/123'}) أو: this.$router.push('/home/123') 3. الحصول على المعلمات: الفرق بين this.$route.params.idparams والاستعلام مشابه لـ get. بعد الانتقال، سيتم ربط عنوان URL للصفحة بمعلمات، على غرار ?id=1. يمكن تمرير العناصر غير المهمة بهذه الطريقة، ولا تزال كلمات المرور وما شابه تستخدم المعلمات، وسيظل المعرف موجودًا عند تحديث الصفحة. المعلمات تشبه النشر، ولن يتم ربط المعلمات بعد عنوان URL للصفحة بعد القفزة.

(3) هذا.$router.replace()

الاستخدام هو نفس ما ورد أعلاه

(4) هذا.$router.go(n)

الانتقال بصفحات n للأمام أو للخلف، يمكن أن يكون n عددًا صحيحًا موجبًا أو سالبًا

الفرق:

ينتقل this.$router.push إلى مسار عنوان url المحدد ويضيف سجلاً في مكدس المحفوظات. سيؤدي النقر مرة أخرى إلى العودة إلى الصفحة السابقة. ينتقل this.$router.replace إلى مسار عنوان url المحدد، ولكن لن يكون هناك أي سجل في سجل المكدس، انقر فوق "رجوع" للانتقال إلى الصفحة السابقة (أي استبدال الصفحة الحالية مباشرةً) this.$router.go(n) الانتقال إلى الأمام أو الخلف n من الصفحات، يمكن أن يكون n عددًا صحيحًا موجبًا أو عددًا صحيحًا سالبًا.

49. يستخدم مبدأ ربط Vue.js ثنائي الاتجاه Vue.js 2.0 سرقة البيانات (وضع الوكيل) مع وضع الناشر والمشترك (وضع PubSub) لاختطاف أدوات الضبط والحروف لكل خاصية من خلال Object.defineProperty(). انشر الرسائل للمشتركين عندما تتغير البيانات وقم بتشغيل عمليات رد الاتصال المقابلة للاستماع.

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

Vue.js 3.0، تخلى عن Object.defineProperty واستخدم الوكيل الأصلي ES6 الأسرع (معترض كائن الوصول، ويسمى أيضًا الوكيل)

50. الفرق بين المحسوب والمراقب

السمة المحسوبة: تعتمد على قيم السمات الأخرى ، ويتم تخزين القيمة المحسوبة فقط.

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

سيناريوهات التطبيق:

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

الفرق بين المحسوبة والطرق

محسوبة: يتم تخزين الخصائص المحسوبة استنادًا إلى تبعياتها وسيتم إعادة تقييمها فقط عندما تتغير تبعياتها المرتبطة بها.

51. مرشح

استخدام المرشحات في VUE للتصفية (التنسيق) لا تعدل مرشحات البيانات ، ولكن تصفية (تنسيق) البيانات وتغيير الإخراج من قبل المستخدم (السمات المحسوبة ، الأساليب ، كل معالجة تنسيق البيانات عن طريق تعديل البيانات. عرض سيناريوهات الاستخدام.

52. Axios هي مكتبة HTTP سهلة الاستخدام وفعالة.

53. ما هو ساس؟ كيفية تثبيت واستخدامه في VUE؟ Sass هي لغة CSS مسبقة.

استخدم NPM لتثبيت اللوادر (SASS-Loader ، CSS-Loader ، إلخ. اللوادر). تكوين Sass Loader في webpack.config.js. 54. Vue.js Page يوفر Vue.js توجيه V-Cloak ، والذي يبقى على العنصر حتى ينتهي المثيل المرتبط. عند استخدامها مع CSS ، يخفي هذا التوجيه علامات غير مجمعة حتى يتم تجميع المثيل. الاستخدام كما يلي. [V-Cloak] {Display: None ؛

55. كيفية حل مشكلة التركيب الهرمي للبيانات العميقة. يمكنك استخدام VM. $ SET يحدد طبقة من البيانات يدويًا: VM. $ SET ("Demo" ، ABCD)

56. تعليمات شائعة

يتم استخدام نموذج V في الغالب لعناصر النماذج لتنفيذ ربط البيانات ثنائية الاتجاه (مثل NG-model في الزاوي) وظيفة الربط الديناميكي V-bind: قم بتغيير البيانات في الوقت المناسب على الصفحة V-On: انقر فوق ربط الوظيفة بالتسمية ، والتي يمكن اختصارها كـ @، على سبيل المثال ، لربط دالة النقر ، يجب كتابة الوظيفة في الأساليب v-for format: v-for = "field name in (of) array json" loop array أو JSON (نفس AS NG-repeat in Angular) محتوى عرض V-Show (مثل NG-Show في Angular) V-Hide Hide Content (مثل Ng-Hide في Angular) V-If Show و Hide (الحذف وإضافة عناصر DOM هي نفسها كما ng-in في الزاوي ، يجب استخدام القيمة الافتراضية) خطأ في تجميع القالب ، خطأ V-Text Parse نص V-HTML PARSE HTML TAG V-BIND: الفئة الثالثة أساليب الربط كائن "{Red: Isred} 'ternary type'isred؟ الأحمر: "ISRED"} ، {Blue: "isBlue"}] '

57. الفرق بين مسار $ وموجه $

$ Route هو "كائن معلومات التوجيه" ، بما في ذلك PATH ، PARAMS ، التجزئة ، الاستعلام ، FullPath ، المطابقة ، الاسم وغيرها من معلمات معلومات التوجيه. جهاز التوجيه $ هو كائن "مثيل التوجيه" بما في ذلك طرق القفز التوجيه ، وظائف الخطاف ، إلخ.

58. كيفية فهم تدفق بيانات Vue الفردي

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

59. ما هو دوم الظاهري؟ ما هي إيجابيات وسلبيات؟ لأن معالجة DOM في المتصفح باهظ الثمن. ستؤدي العمليات المتكررة على DOM إلى بعض مشاكل الأداء. هذا هو سبب إنشاء DOM الظاهري. تعرض DOM الظاهري لـ VUE2 على تنفيذ مكتبة المصدر المفتوح Snabbdom. إن جوهر DOM الظاهري هو استخدام كائن JS الأصلي لوصف عقدة DOM ، وهي طبقة من تجريد DOM الحقيقي.

المزايا: 1. الحد الأدنى للأداء المضمون: يجب أن يكون DOM الافتراضي للإطار هو التكيف مع أي عمليات قد يتم إنشاؤها بواسطة واجهة برمجة تطبيقات الطبقة العليا. . 2. لا حاجة إلى تشغيل DOM يدويًا: لا نحتاج إلى تشغيل DOM يدويًا. بطريقة يمكن التنبؤ بها ، والتي تحسن إلى حد كبير الكفاءة. 3. العيوب: 1. عدم القدرة على إجراء التحسين النهائي: على الرغم من أن التحسين المعقول الظاهري + كافية لتلبية احتياجات الأداء لمعظم التطبيقات ، في بعض التطبيقات ذات المتطلبات العالية للغاية ، لا يمكن لـ DOM Virtual القيام بالتحسين النهائي المستهدف. 2. عند تقديم كمية كبيرة من DOM لأول مرة ، سيكون أبطأ من إدراج InnerHTML بسبب طبقة إضافية من حساب DOM.

60. كيفية حل مشكلة فقدان البيانات عند تحديث صفحة Vuex؟

مطلوب استمرار بيانات Vuex. يوصى باستخدام المكون الإضافي Vuex-Persist ، والذي يعد مكونًا إضافيًا للتخزين المستمر Vuex. لا تحتاج إلى الوصول يدويًا إلى التخزين ، ولكن حفظ الحالة مباشرة إلى ملفات تعريف الارتباط أو LocalStorage.

61. لماذا تحتاج Vuex إلى تقسيمها إلى وحدات وإضافة مساحات أسماء؟

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

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

62. ما هي أنماط التصميم المستخدمة في Vue؟

1. وضع المصنع - تمرير في المعلمات لإنشاء مثيل DOM DOM وإرجاع VNODE للعلامة الأساسية و VNODE المكون وفقًا للمعلمات المختلفة. 2. وضع Singleton-يحتوي البرنامج بأكمله على مثيل واحد فقط. 3. نموذج نشر Subscribe. (آلية حدث VUE) 4. نمط المراقب. (مبدأ البيانات المستجيبة) 5. وضع الديكور (استخدام @Decorator) 6. وضع الإستراتيجية.

63. ما هي تحسينات الأداء التي قمت بها من أجل VUE؟ هنا فقط ندرج تحسين الأداء لـ VUE.

لا تجعل التسلسل الهرمي للكائن عميقًا جدًا ، وإلا فإن الأداء سيكون ضعيفًا. لا تضع البيانات التي لا تتطلب الاستجابة في البيانات (يمكنك استخدام "فريز" مفتاح عند العبور ، والمفتاح هو أفضل قيمة معرف ، وتجنب استخدام V -If في نفس الوقت قائمة البيانات الكبيرة وتحسين أداء الجدول - القائمة الافتراضية/الجدول الافتراضي لمنع التسريبات الداخلية ، وتدمير المتغيرات العالمية والوقت بعد تدمير المكون ، صورة التحميل البطيئة للصورة ، التحميل كسول غير متزامن التوجيه المكون من جهة خارجية عند الطلب الاستخدام المناسب لمكونات ذاكرة التخزين المؤقت للحفاظ على التحميل ، مضاد للانتهاك ، SSR من جانب الخادم أو ما قبل التقديم

64. مبدأ Vue.set طريقة: لن يؤدي تعديل VUE إلى تحديث عرض في حالتين.

1. إضافة سمات جديدة إلى المثيل بعد إنشاء المثيل (إضافة سمات إلى الكائن المستجيب) 2. قم بتغيير مركز الصفيف مباشرة لتعديل قيمة الصفيف. مبدأ Vue.set أو $ هو كما يلي. عند إضافة سمة غير موجودة إلى كائن ما ، سيتم تتبع السمة الجديدة بشكل مستجيب ، ثم يتم تشغيل المراقب الذي تم جمعه بواسطة DEP للكائن OB إلى التحديث. الصفيف نفسه لتحديث المصفوفة.

65. سيناريوهات الاستخدام ومبادئ المكونات الوظيفية.

1. مكونات وظيفية تحتاج إلى تحديد الوظيفية: صحيح عند الإعلان عن المكون. الوظيفة ، لا يمكن استخدام الأحداث خارجياً ، ولا يمكن استدعاء الأحداث خارجيًا من خلال السياق. يشار إليه خارجيًا من خلال المرجع ، فإن المشار إليها الفعلي هو htmlelement6 $ attrs ومثبتة تلقائيا إلى عنصر جذر المكون (يمكن تعطيلها من خلال سمة الوراثة)

المزايا: 1. بما أن مكونات الوظائف لا تحتاج إلى إنشاء مثيل لها ، ولا توجد فيها دورة حياة ، فإن أداء العرض أفضل من المكونات العادية.

سيناريوهات الاستخدام:

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

if (isTrue (ctor.options.functional)) ؛

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

67. إنشاء مشروع VUE. تكوين التوجيه ، تكوين البيئة ، نقل قيمة المكون ، إلخ.

أسئلة مقابلة CSS ، HTML

ما هو الفرق بين HTML و HTML5؟

هناك ثلاثة اختلافات رئيسية:

1. اختلاف إعلان الوثيقة

HTML: لغة ترميز النص التشعبي ، لغة من نوع النص العادي.

HTML5.0: تنص المستند على أن HTML5 سهلة الكتابة والبسيط والاتصال بالقراءة والتطوير السريع من قبل المبرمجين.

2. الاختلافات في الدلالات الهيكلية

HTML: العلامات التي لا تعكس الدلالات الهيكلية ، مثل: <div id = "nav"> </iv>

HTML5: تمت إضافة العديد من العلامات الدلالية ، مثل: <article> ، <جانب جانب> ، <Oudio> ، <BDI> ...

3. الاختلافات في الرسم

HTML: يشير إلى رسومات متجه قابلة للتطوير ، الرسومات المستندة إلى المتجه المستخدمة لتحديد الويب.

HTML5: يستخدم عنصر القماش في HTML5 البرامج النصية (عادةً باستخدام JavaScript) لرسم الصور على صفحة الويب ، ويمكنه التحكم في كل بكسل من القماش.

ما هو نموذج الصندوق؟

سنقوم بتقسيم مربع إلى عدة أجزاء: الحشو والحدود والهامش.

كيف تفهم دلالات HTML5؟

HTML DECANTION TAG HEADER - TITLE NAV - مقالة التنقل - قسم المقالة - القسم أو الفقرة جانبا - تذييل الشريط الجانبي - تذييل تذييل

ما هي فوائد الدلالات؟

في حالة عدم وجود رمز CSS ، يمكن تقديم بنية المحتوى وهيكل الرمز (بحيث يمكن لغير التقنية فهم الكود) لتحسين تجربة المستخدم. مفيد لكبار المسئولين الاقتصاديين. يمكن أن تؤدي الدلالة إلى إنشاء اتصال أفضل مع محركات البحث. (متصفح) 1. ملف تعريف الارتباط (1) يتم استخدامه للتواصل بين العميل والخادم (2) ولكنه يحتوي على وظيفة التخزين المحلي ، لذلك "مستعار" (3) document.cookie = ... فقط احصل على وتعديله (4) عيوب ملفات تعريف الارتباط للتخزين ① سعة التخزين صغيرة جدًا ، حيث يتم نقل جميع طلبات HTTP 4 كيلو بايت فقط ، مما سيؤثر على كفاءة اكتساب الموارد ③ واجهة برمجة التطبيقات بسيطة وتحتاج إلى تغليفها لاستخدام المستند. Cookie 2. LocalStorage ، SessionStorage (1) HTML5 تخصص مصمم للتخزين ، الحد الأقصى للسعة هو 5 أمتار (2) API بسيطة وسهلة الاستخدام (3) lcoalStorage.setitem (المفتاح ، القيمة) ؛ localstorage.getitem (المفتاح) ؛ (4) في وضع IOS Safari Hidden Mode: سيقوم GetItem بالإبلاغ عن خطأ ، والاقتراحات الموحدة للتغليف 3. وسيتم تدمير البيانات عندما تنتهي الجلسة. ولذلك فإن sessionStorage ليس مخزنًا محليًا دائمًا، بل هو تخزين على مستوى الجلسة فقط. يتم استخدام LocalStorage للتخزين المحلي المستمر. ما هي نواة المتصفح الشائعة؟ ** trident kernel: ** يعني أن المتصفح هو IE Browser ، وبالتالي فإن kernel trident تسمى أيضًا e kernel.

** Gecko Core: ** يمثل المتصفح هو متصفح Firefox. إن kernel Gecko مفتوح المصدر ، وأكبر ميزة لها هي أنه يمكن أن يكون منصة.

WebKit: Webkit kernel: المستعرض التمثيلي هو Safari (متصفح Apple) وإصدار أقل من Google Chrome ، وهو مشروع مفتوح المصدر.

** Presto Core: ** يمثل متصفح الأوبرا المترجم (الصينيين المترجمون "مع ذلك". .

** Blink Core: ** تم تطويره بواسطة Google و Opera ، الذي تم إصداره في أبريل 2013 ، وهو Crome Core الحالي.

تحدث عن فهمك لمعايير الويب و W3C؟

معايير الويب:

تنقسم معايير الويب بشكل أساسي إلى ثلاثة أجزاء: الهيكل والأداء والسلوك.

الهيكل: يشير إلى العلامات التي نكتبها عادة في الجسم ، والتي تتكون بشكل أساسي من علامات HTML

الأداء: يشير إلى أنماط علامات HTML الأكثر ثراءً ، وتتألف بشكل أساسي من أنماط CSS

السلوك: يشير إلى التفاعل بين الصفحة والمستخدم ، ويتألف بشكل رئيسي من جزء JS

W3C:

قدمت W3C متطلبات موحدة لمعايير الويب ، وهي مواصفات الكود.

المتطلبات الهيكلية

1. يجب أن تكون رسائل التسمية صغيرة

2. يجب إغلاق الملصق

3. لا يُسمح بعلاماتها بالتداخل بشكل تعسفي

الأداء والمتطلبات السلوكية

1. يوصى باستخدام نصوص CSS و JS الخارجي لتحقيق الفصل بين الهيكل والأداء والهيكل والسلوك ، مما يمكن أن يحسن كفاءة التقديم للصفحة وعرض محتوى الويب بشكل أسرع.

كيفية تنفيذ التصميم المستجيب للمتصفح؟

استخدم استعلامات الوسائط (Media) ، واستخدم التصميم المرن ، واستخدام وحدات النسبة المئوية ، واستخدام وحدات REM ، واستخدم وحدات VH و HW.

فهم محددات CSS والأولويات؟

محددات CSS شائعة الاستخدام

محدد المعرف ، محدد الفئة ، محدد العلامات ، محدد السمات ، محدد الفئة الزائفة ، محدد سليل

قسم الوزن

في نفس المستوى:

! مهم> نمط مضمّن> محدد المعرف> محدد الفئة> (محدد العلامات ، محدد الفئة الزائفة ، محدد السمات)

على مستويات مختلفة:

عادة ، كلما ارتفعت قيمة الوزن ، كلما زادت الأولوية ، ولكن لم يكن هناك تقسيم محدد لقيمة الوزن ، لذلك في معظم التطورات الحالية ، كلما زاد المستوى ، زاد الأولوية.

تحدث عن فهمك للتراجع وإعادة الرسم؟

ما هو ريبو؟

يحدث التراجع عندما يتغير العرض أو الطول أو التخطيط أو العرض أو إخفاء عنصر ما ، أو بنية النص داخل العنصر ، مما يتسبب في إعادة بناء الصفحة.

ما هو إعادة الطلاء؟

يحدث إعادة الرسم عندما لم يتغير العرض أو الارتفاع أو التصميم أو العرض أو إخفاء عنصر ما نفسه ، ولكن فقط تم تغيير نمط المظهر للعنصر.

متى سيحدث الجمع؟ عند إضافة عنصر DOM المرئي أو حذفه ، يتغير موضع العنصر ، ويتغير حجم العنصر ، ويتغير المحتوى ، وعندما يتم تقديم الصفحة لأول مرة.

متى ستقام إعادة الطالبة؟

اذكر بعض أنماط CSS ذات الصلة: اللون ، الخلفية ، حجم الخلفية ، الرؤية ، مربع الشادو

ما هو الفرق بين العتامة: 0 ، الرؤية: مخفية ، والعرض: لا شيء؟

Outsity = 0 ، يتم إخفاء العنصر ، ولكن لن يتم تغيير تخطيط الصفحة.

الرؤية = مخفية ، يتم إخفاء العنصر ، ولكن لن يتم تغيير تخطيط الصفحة ، ولكن لن يتم تشغيل الأحداث المرتبطة بالعنصر.

Display = لا شيء يخفي العنصر ويغير تخطيط الصفحة.

CSS Preprocessor

أقل

ما هو الفرق بين العنوان و alt of <img>؟

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

ما هي العناصر المضمنة والعناصر على مستوى الكتلة؟ إلى أي عنصر ينتمي إليه IMG؟

عنصر الكتلة

العنوان - العنوان blockquote - مركز مرجع بلوك - كتلة محاذاة المركز dir - قائمة الدليل div - مستوى كتلة شائع الاستخدام ، وأيضًا التسمية الرئيسية لتخطيط CSS DL - Fieldset - نموذج التحكم - المستوى 3 العنوان H4 - المستوى 4 العنوان H5 - المستوى 5 العنوان H6 - المستوى 6 عنوان HR - خط الفاصل الأفقي IsIndex - قائمة مطالبة الإدخال - قائمة القائمة noframes - إطارات المحتوى الاختياري ، (عرض هذا للمتصفحات التي لا تدعم إطارات) كتلة) محتوى noscript - محتوى البرنامج النصي الاختياري (يتم عرض هذا المحتوى للمتصفحات التي لا تدعم البرنامج النصي) OL - تم طلب النموذج P - الفقرة قبل - جدول نص منسق - الجدول UL - قائمة غير مرتبة

عناصر مضمنة

A - مرساة نقطة ABBR - اختصار الاختصار - الحرف الأول B - BOLD (غير موصى به) BDO - BIDI Override BIG - كبير الخط الكبير - كسر الخط - رمز المرجع - رمز الكمبيوتر (مطلوب عند الإشارة إلى رمز المصدر) DFN - تحديد الحقل EM - التركيز على الخط - إعداد الخط (غير الموصى به) I - IMG المائل - إدخال الصورة - مربع الإدخال KBD - تحديد ملصق نص لوحة المفاتيح - تسمية الجدول Q - اقتباس قصير - تسطير (غير موصى به) SAMP - تحديد نموذج رمز الكمبيوتر - اختيار العنصر تمتد نص خطي صغيرة-حاويات مضمّنة شائعة الاستخدام ، وتحديد الكتل داخل الإضراب النصية-تسطير قوي-التركيز الجريء الفرعي-SUPERSSING SUP-SuperScript-مربع إدخال نص متعدد الخطوط TT-Teletype Text U-Underscore

IMG هو عنصر استبدال مضمّن وله نفس التأثير كعنصر كتلة

الفرق بين القراءة والتعطيل في النماذج

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

المتصفح

1. أدخل عنوان URL في المتصفح وعرضه على صفحة الويب.

يبدأ حل المجال مصافحة TCP لإنشاء اتصال TCP. يطلب الموارد في رمز HTML.

2. عيوب ملفات تعريف الارتباط

هناك حد أقصى لعدد ملفات تعريف الارتباط التي تم إنشاؤها تحت اسم مجال محدد. ، بشكل عام لا يتجاوز 4095 بايت.

3. المتصفحات والزبد السائدة

Google Chrome: WebKit/Blink Safari: WebKit IE: Trident Firefox: Gecko Opera: Presto/Webkit/Blink

4. الفرق بين SessionStorage و LocalStorage

يتم استخدام SessionStorage لتخزين البيانات محليًا في جلسة ما. يتم استخدام localStorage للتخزين المحلي المستمر، وما لم يتم حذف البيانات بشكل نشط، فلن تنتهي صلاحية البيانات أبدًا.

5. تحدث عن فهم مواصفات BFC

BFC هو سياق التنسيق ، أي سياق التنسيق. آثار BFC هي السماح للعناصر داخل وخارج BFC بالتفاعل مع بعضها البعض.

6. يرجى تسمية ثلاث طرق على الأقل لتقليل وقت تحميل الصفحة.

تقليل طلبات HTTP المتكررة في الصفحة.

7. كيفية تحسين أداء الموقع؟

للمحتوى ، تقليل طلبات HTTP: توزيع ملفات CSS ، وصور مضمّنة. استخدم GZIP للمكونات. في الجزء السفلي من الصفحة تمتد الصور في HTML.

8. تخزين المتصفح؟

عندما تكون عابرة ، نحتاج فقط إلى تخزين البيانات في الذاكرة ، وتتوفر التخزين المستمر فقط في وقت التشغيل. وما إلى ذلك ، في HTTP تلقائيًا ، يكون الحد الأعلى للحجم هو 4K ، يمكنك تعيين وقت انتهاء الصلاحية بنفسك LocalStorage / SessionStorage: تخزين التخزين / النافذة على المدى الطويل ، وحذف الحد هو 4 ~ 5MINDEXDB REDIS CACHE REDIS قاعدة البيانات

9. الحصول على/بعد؟

الحصول على: ذاكرة التخزين المؤقت ، وطول الطلب محدود ، وسيتم حفظه في التاريخ ، ولا توجد آثار جانبية (لا يتم تعديل الموارد) ، و Idempotent (عدد الطلبات لا علاقة لها بالموارد

10. قضايا السلامة؟

هجوم XSS: حقن ملفات تعريف الارتباط الكود الضارة ، قم بتعيين httponly للهروب قائمة بيضاء ولا يمكن الوصول إليها بواسطة طلب طلب موقع الويب الثالث

تحسين الأداء

1. ما هي جوانب تحسين الأداء؟

ضغط الموارد ودمجها ، تقليل طلبات HTTP ، التحميل غير المتزامن للرمز غير النووي ، باستخدام ذاكرة التخزين المؤقت للمتصفح ، واستخدام CDN لإعادة تحديد DNS

2. التحميل غير المتزامن؟

التحميل السيناريو الديناميكي deferasync

3. ما هي الاختلافات في طرق التحميل؟

يتم تنفيذ التأجيل بعد تحليل HTML.

4. التحميل المسبق؟

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

5. DNS قبل الدقة؟

يستغرق دقة DNS أيضًا وقتًا ، ويمكن الحصول على IP المقابل لاسم المجال مسبقًا من خلال الدقة المسبقة. <meta http-equiv = 'x-dns-prefetch-control' content = 'on'> <link rel = "dns-prefetch" href = "// yuchengkai.cn" بروتوكول HTTPS مسبقًا ، لذلك يجب ضبط التعريف يدويًا

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

7. التحميل كسول؟

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

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

رد فعل أسئلة المقابلة

1. متى لاستخدام مدير الدولة؟

بالنظر إلى المشروع ككل ، فإن استخدام المستخدم معقد. من مصادر متعددة. المكون.

2. ما هي خصائص رد الفعل؟

يستخدم ** DOM ** بدلاً من DOM Real. يمكن تقديمها باستخدام جانب الخادم. يتبع تدفق البيانات أحادي الاتجاه أو ربط البيانات

3. سرد بعض المزايا الرئيسية للتفاعل؟

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

4. ما هو JSX؟

JSX قصير لجافا سكريبت XML. هو ملف يستخدمه React الذي يعزز قوة المعبر وبناء جملة القالب الشبيه بـ HTML من JavaScript. هذا يجعل ملفات HTML سهلة الفهم.此文件能使应用非常可靠，并能够提高其性能例子render() {return(<div><h1> Hello World </h1></div>)}

5、说说为什么浏览器无法读取JSX?

浏览器只能处理JavaScript 对象，而不能读取常规JavaScript 对象中的JSX。所以为了使浏览器能够读取JSX，首先，需要用像Babel 这样的JSX 转换器将JSX 文件转换为JavaScript 对象，然后再将其传给浏览器

6、你理解“在React 中，一切都是组件”这句话?

组件是React 应用UI 的构建块。这些组件将整个UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响UI 的其余部分

7、 React 中render()的目的?

每个React 组件强制要求必须有一个render()。它返回一个React 元素，是原生DOM 组件的表示。如果需要渲染多个HTML 元素，则必须将它们组合在一个封闭标记内，例如<form>、<group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果

8、什么是Props?

Props 是React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据

9、React 中的状态是什么？

状态是React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与Props 不同，它们是可变的，并创建动态和交互式组件。可以通过this.state() 访问它们。

10、区分状态和Props?

条件StateProps从父组件中接受初始值YesYes父组件可以改变值NoYes在组件中设置默认值NoYes在组件的内部变化YesNo设置子组件的初始值YesYes在子组件的内部改变NoYes

11、如何更新组件的状态?

使用this.setState()更新组件的状态

12、React 组件生命周期的阶段是什么?

React 组件的生命周期有三个不同的阶段：初始渲染阶段：这是组件即将开始其生命之旅并进入DOM 的阶段。更新阶段：一旦组件被添加到DOM，它只有在prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从DOM 中删除

13、你对React 的refs 有什么了解?

Refs 是React 中引用的简写。它是一个有助于存储对特定的React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对render()返回的特定元素或组件的引用。当需要进行DOM 测量或向组件添加方法时，它们会派上用场列出一些应该使用refs 的情况?需要管理焦点、选择文本或媒体播放时触发式动画与第三方DOM 库集成

14、如何模块化React 中的代码?

可以使用export 和import 属性来模块化代码。它们有助于在不同的文件中单独编写组件

15、什么是高阶组件HOC?

高阶组件是重用组件逻辑的高级方法，是一种源于React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为HOC 是“纯（Pure）”组件

16、你能用HOC 做什么?

HOC 可用于许多任务:用代码重用，逻辑和引导抽象渲染劫持状态抽象和控制Props 控制

17、 React 中key 的重要性是什么?

key 用于识别唯一的Virtual DOM 元素及其驱动UI 的相应数据。它们通过回收DOM 中当前所有的元素来帮助React 优化渲染。这些key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能

18、MVC 框架的主要问题是什么?

key 用对DOM 操作的代价非常高程序运行缓慢且效率低下内存浪费严重由于循环依赖性，组件模型需要围绕models 和views 进行创建

19、请你解释一下Flux?

Flux 是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数据权限的中心store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。

20、你对“单一事实来源”有什么理解

Redux 使用“store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在store 中，并且它们从store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。

21、列出Redux 的组件?

Redux 由以下组件组成:Action 这是一个用来描述发生了什么事情的对象Reducer 这是一个确定状态将如何变化的地方Store 整个程序的状态/对象树保存在Store 中View 查只显示Store 提供的数据

22、 Store 在Redux 中的意义是什么?

store 是一个JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过Reducer 返回一个新状态

23、 Redux 有哪些优点?

结果的可预测性可维护性服务器端渲染易于测试-

24、 什么是React 路由?

React 路由是一个构建在React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页Web 应用。 React 路由有一个简单的API。

25、说说你对React 的渲染原理的理解?

单向数据流。React 是一个MVVM 框架，简单来说是在MVC 的模式下在前端部分拆分出数据层和视图层。单向数据流指的是只能由数据层的变化去影响视图层的变化，而不能反过来（除非双向绑定）数据驱动视图。我们无需关注页面的DOM，只需要关注数据即可渲染过程，生命周期……setState()大部分时候是异步执行的，提升性能。

26、React 中三种构建组件的方式?

React.createClass()、ES6 class 和无状态函数。

مسج

说出jQuery中常见的几种函数以及他们的含义是什么? （1）get()取得所有匹配的DOM元素集合； （2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素； （3）append(content)向每个匹配的元素内部追加内容； （4）after(content)在每个匹配的元素之后插入内容； （5）html()/html(var)取得或设置匹配元素的html内容； （6）find(expr)搜索所有与指定表达式匹配的元素； （7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数； （8）empty()删除匹配的元素集合中所有的子节点； （9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法； （10）attr(name)取得第一个匹配元素的属性值。

jQuery 能做什么？ Get the elements of the page; modify the appearance of the page; change the large content of the page; respond to the user's page operations; add dynamic effects to the page; get information from the server without refreshing the page; simplify common javascript tasks .

如何将一个HTML元素添加到DOM树中的？ 可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。

什么是jQuery? jQuer能做什么？ jQuery是一套JavaScript的库，它简化了使用Javascript进行网页特效开发的一些复杂性，提供了对常见任务的自动化和复杂任务的简化

jQuery的作用快速获取文档元素提供漂亮的页面动态效果创建Ajax无刷新网页提供对JavaScript语言的增强增强的事件处理更改网页内容JQuery可以修改网页中的内容,比如更改网页的文本、插入或转网页图像, jQuery简化了原本使用JavaScript代码需要处理的方式。

JQuery 的优点1.利用css的选择器提供高速的元素查找行为。 2.提供了一个抽象层来标准化各种常见的任务，可以解决各种浏览器的兼容问题。 3.将复杂的代码简化，提供连缀编程模式，大大简化了代码的操作。

以上就是分享一些值得收藏的精选Web前端面试题（附答案）的详细内容，更多请关注本站其它相关文章！