مُنشئ ودورة الحياة التي يجب تعلمها كل يوم.

مُنشئ

يبدأ كل تطبيق Vue.js عن طريق إنشاء مثيل جذر لـ Vue من خلال Vue المُنشئ:

 var vm = new vue ({// reports})

مثيل VUE هو في الواقع هو ViewModel الموصوف في وضع MVVM - لذلك غالبًا ما يتم استخدام الاسم المتغير VM في المستندات.

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

يمكن تمديد مُنشئ VUE لإنشاء مكونات مكونات قابلة لإعادة الاستخدام بخيارات محددة مسبقًا:

 var myComponent = vue.extend ({// extension Options}) // سيتم إنشاء جميع مثيلات myComponent` مع خيارات التمديد المحددة مسبقًا var myComponentInstance = new myComponent ()

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

الخصائص والأساليب

كل مثيل VUE سوف يقوم بتكييف جميع الخصائص في كائن البيانات الخاص بها:

 var data = {a: 1} var vm = new vue ({data: data}) vm.a === data.a // -> سوف تؤثر خصائص إعداد True // أيضًا على البيانات الأصلية vm.a = 2data.a // -> 2 // ... vice versa data.a = 3vm.a // -> 3

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

بالإضافة إلى سمات البيانات هذه ، تعرض مثيلات VUE بعض سمات وطرق الأمثلة المفيدة. هذه الخصائص والأساليب لها بادئة $ لتمييزها عن سمات بيانات الوكيل. على سبيل المثال:

 var data = {a: 1} var vm = new vue ({el: '#example' ، data: data}) vm. $ data === data // - تم تغييره})

ارجع إلى وثائق API لعرض جميع خصائص وطرق المثيل.

دورة حياة مثيل

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

 var vm = new vue ({data: {a: 1} ، تم إنشاؤه: function () {// `هذا يشير إلى VM مثيل console.log ('a is:' + this.a)}}) // ->" a is: 1 "

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

مخطط دورة الحياة

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

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

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