البحث عن مبادئ الاستجابة الداخلية التي يجب تعلمها كل يوم في vue.js

مبدأ استجابة متعمق

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

كيفية تتبع التغييرات

تمرير كائن عادي إلى مثيل VUE كخيار للبيانات الخاص به ، ستعمل Vue.js على اجتياز خصائصه وتحويلها إلى getter/setter باستخدام Object.DefineProperty. هذه ميزة ES5 ولا يمكن تنفيذها مع بقع. هذا هو السبب في أن vue.js لا يدعم IE8 وأقل.

لا يمكن للمستخدمين رؤية getters/setters ، ولكن داخليًا ، يتركون Vue.js تتبع التبعيات ، وإخطار التغييرات عند الوصول إلى الخصائص وتعديلها. تتمثل إحدى المشكلات في أن تنسيق Getter/Setter مختلف عند طباعة كائنات البيانات على وحدة التحكم في المتصفح ، واستخدام طريقة مثيل VM. $ log () يمكن أن تحصل على مزيد من الإخراج ودودًا.

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

تغيير مشكلة الكشف

بسبب قيود ES5 ، لا يمكن لـ Vue.js اكتشاف إضافة أو إزالة خصائص الكائن. نظرًا لأن Vue.js يحول الخاصية إلى getter/setter عند تهيئة المثيل ، يجب أن تكون الخاصية على كائن البيانات للسماح لـ Vue.js بتحويلها لجعلها تستجيب. على سبيل المثال:

 var data = {a: 1} var vm = new vue ({data: data}) // `vm.a` و` data.a` الآن مستجيبين vm.b = 2 // `vm.b` لا يستجيب data.b = 2 //` data.b` لا يستجيب

ومع ذلك ، هناك طريقة لإضافة سمات بعد إنشاء مثيل وجعلها تستجيب.

بالنسبة لحالات VUE ، يمكنك استخدام طريقة مثيل $ SET (المفتاح ، القيمة):

 مجموعة VM. $ ('b' ، 2) // `vm.b` و` data.b` تستجيب الآن

بالنسبة لكائنات البيانات العادية ، فإن الطريقة العالمية vue.set (الكائن ، المفتاح ، القيمة):

 Vue.set (البيانات ، "C" ، 3) // `vm.c` و` data.c` تستجيب الآن

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

 // لا تستخدم `object.assign (this.someObject ، {a: 1 ، b: 2})` this.someObject = object.assign ({} ، this.someObject ، {a: 1 ، b: 2})

هناك أيضًا بعض المشكلات المتعلقة بالأسلوب التي تمت مناقشتها في تقديم القائمة من قبل.

تهيئة البيانات

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

لا تفعل هذا:

 var vm = new vue ({template: '<viv> {{msg}} </fire>'}) // ثم أضف `msg`vm. $ set ('msg' ، 'hello!')

افعل هذا:

 var vm = new vue ({data: {// DECLARE `msg` msg: ''} ، القالب: '<viv> {{msg}} </div>'}) // ثم قم بتعيين` msg`vm.msg = 'hello!'

هناك سببان للقيام بذلك:

1. كائن البيانات يشبه مخطط حالة المكون. إن إعلان جميع الخصائص عليه يجعل الفهم رمز المكون أسهل.

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

قائمة انتظار التحديث غير المتزامنة

vue.js الافتراضيات لتحديث DOM بشكل غير متزامن. عندما يتم ملاحظة تغيير البيانات ، تبدأ VUE في قائمة انتظار لتخزين جميع تغييرات البيانات في حلقة الحدث نفسها. إذا تم إطلاق مراقب عدة مرات ، فلن يتم دفعه إلا إلى قائمة الانتظار مرة واحدة. انتظر حتى حلقة الحدث التالية ، ستقوم Vue بمسح قائمة الانتظار وتقديم تحديثات DOM اللازمة فقط. يفضل MutationObserver في قوائم الانتظار غير المتزامنة الداخلية ، ويتم استخدام setTimeout (FN ، 0) إذا لم يكن مدعومًا.

على سبيل المثال ، مع مجموعة VM.Somedata = "قيمة جديدة" ، لن يتم تحديث DOM على الفور ، ولكن سيتم تحديث في المرة التالية التي تقوم فيها حلقة الحدث بمسح قائمة الانتظار. لا يتعين علينا في الأساس أن نهتم بهذه العملية ، ولكنها ستساعد إذا كنت ترغب في القيام بشيء ما بعد تحديث حالة DOM. على الرغم من أن Vue.js يشجع المطورين على اتباع النهج القائم على البيانات وتجنب تعديل DOM مباشرة ، فإنه يحدث في بعض الأحيان. من أجل انتظار Vue.js لإكمال تحديث DOM بعد تغيير البيانات ، يمكنك استخدام vue.nexttick (رد الاتصال) مباشرة بعد تغيير البيانات. يتم استدعاء رد الاتصال بعد اكتمال تحديث DOM. على سبيل المثال:

<div id = "example"> {{msg}} </div>

 var vm = new vue ({el: '#example' ، data: {msg: '123'}})

طريقة المثيل هذه أكثر ملاءمة لأنها لا تتطلب VUE Global ، ويترتبط رد الاتصال هذا تلقائيًا بمثيل VUE الحالي:

 vue.component ('example' ، {template: '<span> {{msg}} </span>' ، data: function () {return {msg: 'not update'}} ، methods: {updateMessage: function () {this.msg = 'updated' console.log ($ el.text) () {console.log (هذا. $ el.textContent) // => 'محدث'})}}})

سر سمات الحوسبة

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

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

نظرًا لأن الخاصية المحسوبة مخزنة مؤقتًا ، لا يتم استدعاء Getter دائمًا عند الوصول إليها. النظر في المثال التالي:

 var vm = new vue ({data: {msg: 'hi'} ، حساب: {مثال: function () {return date.now () + this.msg}}})

مثال خاصية محسوبة له تبعية واحدة فقط: vm.msg. التاريخ. الآن () ليس اعتمادًا على الاستجابة لأنه لا علاقة له بنظام مراقبة بيانات VUE. لذلك ، عند الوصول إلى VM.Example ، سيتم العثور على الطابع الزمني ليظل دون تغيير ما لم يتغير VM.MSG.

في بعض الأحيان ، آمل ألا يغير Getter السلوك الأصلي واتصل Getter في كل مرة يمكنني الوصول فيها إلى VM.Example. في هذا الوقت ، يمكن إيقاف تشغيل ذاكرة التخزين المؤقت للسمة المحسوبة المحددة:

 حساب: {مثال: {cache: false ، get: function () {return date.now () + this.msg}}}

الآن في كل مرة تصل فيها إلى VM.Example ، يكون الطابع الزمني جديدًا. ومع ذلك ، فإن الوصول إلى JavaScript مثل هذا تمامًا ؛ لا يزال ربط البيانات مدفوعًا بالتبعيات. إذا كانت السمة المحسوبة {{example}} ملزمة في الوحدة ، فسيتم تحديث DOM فقط إذا تغيرت اعتماد الاستجابة.

تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.

للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.