ویژگی های محاسبه شده (Computed Properties)
«ویژگی محاسبه شده (Computed Property)» مقداری وابسته به داده ها می سازد. مقدارش خودکار به روز می شود. مثل نمره میانگین که از چند نمره حساب می شود.
محل تعریف در Vue
مثل data و methods، یک بخش رزرو شده داریم. نامش computed است.
const app = Vue.createApp({
data() {
return {
// ... داده ها
};
},
computed: {
// ... ویژگی های محاسبه شده
},
methods: {
// ... متدها
}
});
نکته: «پویا» یعنی با تغییر ورودی، خروجی خودش تغییر می کند.
بازخورد ساده: true/false
این حالت مقدار خام را نشان می دهد. هنوز خوانا نیست.
<input type="checkbox" v-model="chbxVal"> {{ chbxVal }}
<\/input>
<script>
const app = Vue.createApp({
data() {
return {
chbxVal: false
};
}
});
<\/script>
بهبود خوانایی با ویژگی محاسبه شده
می خواهیم به جای true/false، «yes» یا «no» ببینیم.
<input type="checkbox" v-model="chbxVal"> {{ isImportant }}
<\/input>
<script>
const app = Vue.createApp({
data() {
return {
chbxVal: false
};
},
computed: {
isImportant() {
if (this.chbxVal) {
return 'yes';
} else {
return 'no';
}
}
}
});
<\/script>
نکته: ویژگی محاسبه شده ورودی نمی گیرد. نتیجه را برمی گرداند.
Computed در برابر Method
متد با رویداد اجرا می شود. اما computed خودکار واکنش نشان می دهد.
computed مثل data مصرف می شود. ولی همیشه از وابستگی ها حساب می شود.
گام های عملی
- یک داده پایه بساز. مثلاً
chbxVal. - یک computed تعریف کن. مقدار خوانا بساز.
- در قالب، مقدار computed را نمایش بده.
جمع بندی سریع
- computed وابسته به داده ها است.
- خودکار و سریع به روزرسانی می شود.
- برای نمایش های خوانا عالی است.
- جایگزین متد فراخوانی شده نیست.
برای استایل پویا، صفحه بایندینگ CSS را ببین. همچنین واچرها را برای پایش تغییرات بررسی کن. اگر نیاز شد، به ویژگی های محاسبه شده بازگرد.