يجب أن يتعلم Vue.js كل يوم محسوب ومشاهدة $

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

أمثلة أساسية

 <div id = "example"> a = {{a}} ، b = {{b}} </div>

 var vm = new vue ({el: '#example' ، البيانات: {a: 1} ، محسوبة: {// a getter for satective b: function () {// `this` يشير إلى مثيل vm إرجاع this.a + 1}})

هنا نعلن خاصية محسوبة ب. سيتم استخدام الوظيفة التي نقدمها كجائزة للعقار VM.B.

 console.log (vm.b) // -> 2vm.a = 2console.log (vm.b) // -> 3

يمكنك فتح وحدة التحكم في المتصفح وتعديل VM. تعتمد قيمة VM.B دائمًا على قيمة VM.A.

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

حساب الخصائص مقابل $ watch

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

 <div id = "demo"> {{fullname}} </div> var vm = new vue ({el: '#demo' ، data: {firstName: 'foo' ، lastName: 'bar' ، fullname: 'foo bar'}}}} this.lastname})

الرمز أعلاه هو تكرار الضرورات. مقارنة مع خصائص الحساب:

 var vm = new vue ({data: {firstName: 'foo' ، lastName: 'bar'} ، compated: {fullname: function () {return this.firstName + '' + this.lastname}}})

هذا أفضل ، أليس كذلك؟

حساب setter

السمة المحسوبة هي مجرد getter افتراضيًا ، ولكن يمكنك أيضًا توفير مجموعة عند الحاجة:

 // ... compute: {fullname: {// getter get: function () {return this.firstName + '' + this.lastname} ،

الآن عند الاتصال بـ vM.FullName = 'John Doe' ، سيتم استدعاء Setter ، وسيتم أيضًا تحديث Vm.FirstName و Vm.LastName وفقًا لذلك.

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

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

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