مقدمة
تُستخدم السمات المحسوبة لوصف التعبير التعريفي بأن القيمة تعتمد على القيم الأخرى. عندما تقوم بربط البيانات بخاصية محسوبة في قالب ، يقوم VUE بتحديث DOM عندما تعتمد أي قيمة تعتمد عليها على سبب تغيير الخاصية المحسوبة. هذه الميزة قوية للغاية ، يمكن أن تجعل الكود الخاص بك أكثر تصريحًا ، ويعتمد على البيانات وسهلة الصيانة.
التعبيرات في القوالب مريحة للغاية ، لكنها في الواقع تستخدم فقط للعمليات البسيطة.
القالب هو وصف بنية العرض. إن وضع الكثير من المنطق في القالب سيجعل القالب ثقيلًا للغاية ويصعب الحفاظ عليه.
هذا هو السبب في أن vue.js يحد من التعبيرات الملزمة لتعبير واحد ،
إذا كان أكثر من تعبير مطلوب ، فيجب استخدام خصائص محسوبة.
لنلقي نظرة على هذا المثال البسيط
<div id = "example"> a = {{a}} ، b = {{b}} </div> var vm = new vue ({// سبب تسمية vm هو أن هذا هو بالفعل vm في mvvm el: '#example' ، البيانات: {a: 1} إرجاع this.a + 1}}})نتيجة الإخراج:
أ = 1 ، ب = 2
هنا نعلن خاصية محسوبة ب. سيتم استخدام الوظيفة التي نقدمها كجائزة للعقار VM.B.
console.log (vm.b) // -> 2vm.a = 3console.log (vm.b) // -> 3
يمكنك ربط الخصائص المحسوبة في قالب كما لو كنت تربط خاصية عادية. يعرف Vue أن VM.B يعتمد على VM.A ، لذلك عندما يتغير VM.A ، سيتم أيضًا تحديث الروابط التي تعتمد على VM.B. وأفضل شيء هو أننا نخلق هذه الاعتماد بشكل إعلاني: إن getters من الخصائص المحسوبة نظيفة وليس لها آثار جانبية ، لذلك من السهل أيضًا اختبارها وفهمها.
إذا كنت ترغب في مراقبة تغييرات البيانات على مثيلات VUE ، فيمكنك استخدام طريقة توفرها Vue.js $watch .
<div id = "demo"> {{fullname}} </div> var vm = new vue ({data: {firstName: 'foo' ، lastName: 'bar' ، fullname: 'foo bar'}}) vm. $ watch ('firstname' this.lastname}) ومع ذلك ، يمكن أيضًا تنفيذ الطريقة المذكورة أعلاه باستخدام computed :
var vm = new vue ({data: {firstName: 'foo' ، lastName: 'bar'} ، compated: {fullname: function () {return this.firstName + '' + this.lastname}}}) هل من الأسهل الكتابة بهذه الطريقة؟ لا يوجد رمز مكرر غير ضروري؟ يشجع المسؤول أيضًا استخدام الأساليب computed .
عندما تحدثت عن computed أعلاه ، تم ذكر أن هذه الطريقة توفر طريقة get الافتراضية. فهل هناك طريقة set ؟
// ... compute: {fullname: {// getter get: function () {return this.firstName + '' + this.lastname} ، إذا اتصلنا vm.fullName = 'John Doe' ، فسيتم استدعاء setter . سيكون لدى vm.firstName و vm.lastName تحديثات مقابلة. هذه الطريقة مفيدة في بعض الأحيان.
لخص
ما سبق هو كل شيء عن سمات الحوسبة vue.js. آمل أن يكون هذا المقال مفيدًا للجميع. سيقوم المحرر أيضًا بتحديث المحتوى حول Vue.js واحدًا تلو الآخر. يمكن للأصدقاء المهتمين الاستمرار في متابعة wulin.com.