استفاده از computed properties برای محاسبات واکنش‌گرا در Vue.js
در Vue.js، computed properties یکی از ویژگی‌های قدرتمند است که به شما اجازه می‌دهد محاسباتی را بر اساس داده‌ها انجام دهید و به‌طور خودکار وقتی داده‌های ورودی تغییر می‌کنند، نتیجه محاسباتی به‌روز شود. این ویژگی بسیار مفید است، زیرا باعث می‌شود که نیازی به نوشتن مجدد کد برای محاسبات تکراری نباشد و همه‌چیز به‌طور خودکار و بهینه انجام شود.
مفهوم computed properties
computed properties در Vue ویژگی‌هایی هستند که به‌طور خودکار مقادیر را بر اساس داده‌های موجود محاسبه کرده و هر زمان که داده‌های مورد نظر تغییر کنند، به‌طور خودکار به‌روزرسانی می‌شوند. در واقع، computed برای انجام محاسبات یا تغییرات داینامیک بر اساس داده‌ها به‌کار می‌رود.
یکی از مهم‌ترین ویژگی‌های computed properties این است که فقط زمانی محاسبه می‌شوند که وابستگی‌های آن‌ها تغییر کنند. این ویژگی باعث بهینه‌سازی عملکرد و جلوگیری از محاسبات اضافی می‌شود.
نحوه استفاده از computed properties
۱. تعریف یک computed property
برای تعریف یک computed property، از computed در بخش script کامپوننت استفاده می‌کنیم.
<div>
<h1>مجموع دو عدد: {{ sum }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
number1: 10,
number2: 20
}
},
computed: {
sum() {
return this.number1 + this.number2
}
}
}
</script>
در این مثال:
- sum یک computed property است که حاصل جمع number1 و number2 را محاسبه می‌کند.
- هر بار که یکی از داده‌ها (مثل number1 یا number2) تغییر کند، sum به‌طور خودکار به‌روز می‌شود.
ویژگی‌ها و مزایای computed properties
۱. محاسبات واکنش‌گرا
computed properties تنها زمانی محاسبه می‌شوند که داده‌های وابسته به آن‌ها تغییر کنند. این ویژگی باعث می‌شود که Vue تنها محاسبات لازم را انجام دهد و عملکرد اپلیکیشن بهینه‌تر باشد.
۲. ذخیره نتایج محاسبات
یکی از ویژگی‌های مهم computed این است که محاسبات فقط یک‌بار انجام می‌شوند و نتیجه آن‌ها در کش (cache) نگه‌داشته می‌شود. به عبارت دیگر، اگر هیچ‌یک از داده‌های وابسته تغییر نکند، Vue از نتیجه قبلی استفاده می‌کند، که این موضوع باعث می‌شود محاسبات تکراری انجام نشوند.
۳. استفاده راحت‌تر نسبت به متدها
اگر نیاز به انجام محاسباتی دارید که به‌طور مکرر در template نمایش داده می‌شوند، استفاده از computed properties بسیار مناسب‌تر است. زیرا برخلاف متدها که در هر بار رندر دوباره اجرا می‌شوند، computed properties فقط زمانی که وابستگی‌ها تغییر کنند محاسبه می‌شوند.
تفاوت computed properties با methods
در حالی که methods و computed هر دو برای انجام محاسبات استفاده می‌شوند، تفاوت‌های مهمی دارند:
- methods هر بار که در قالب (template) فراخوانی می‌شوند، اجرا می‌شوند. به عبارت دیگر، متدها هر بار که به آن‌ها ارجاع داده می‌شود، محاسبه می‌شوند.
- computed تنها زمانی محاسبه می‌شود که وابستگی‌های آن تغییر کنند و سپس نتیجه محاسبه ذخیره می‌شود.
مثال تفاوت بین computed و methods:
<div>
<p>مجموع با متد: {{ sumWithMethod() }}</p>
<p>مجموع با computed: {{ sum }}</p>
</div>
</template>
<script>
export default {
data() {
return {
number1: 10,
number2: 20
}
},
computed: {
sum() {
console.log('محاسبه sum');
return this.number1 + this.number2
}
},
methods: {
sumWithMethod() {
console.log('محاسبه sumWithMethod');
return this.number1 + this.number2
}
}
}
</script>
در اینجا:
- sumWithMethod هر بار که در قالب استفاده می‌شود، دوباره محاسبه می‌شود.
- sum فقط زمانی محاسبه می‌شود که number1 یا number2 تغییر کند.
استفاده از computed برای فیلتر و مرتب‌سازی داده‌ها
یکی از کاربردهای رایج computed properties، فیلتر کردن یا مرتب‌سازی داده‌ها به‌طور داینامیک است.
مثال از فیلتر کردن داده‌ها با computed:
<div>
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'آلبالو' },
{ id: 2, name: 'سیب' },
{ id: 3, name: 'گلابی' }
],
searchTerm: 'آ'
}
},
computed: {
filteredItems() {
return this.items.filter(item => item.name.includes(this.searchTerm))
}
}
}
</script>
در اینجا:
- filteredItems به‌طور خودکار داده‌ها را بر اساس searchTerm فیلتر می‌کند.
- هر بار که searchTerm تغییر کند، filteredItems به‌طور خودکار به‌روز می‌شود.
استفاده از computed برای محاسبه ویژگی‌های پیچیده‌تر
شما می‌توانید از computed properties برای انجام محاسبات پیچیده‌تر یا ترکیب چندین داده استفاده کنید.
مثال محاسبات پیچیده:
<div>
<h2>{{ fullName }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'جان',
lastName: 'دو'
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}
</script>
در اینجا:
- fullName یک ویژگی محاسبه‌شده است که ترکیب firstName و lastName را به‌طور خودکار انجام می‌دهد.
جمع‌بندی
- computed properties برای انجام محاسبات واکنش‌گرا و بهینه در Vue.js استفاده می‌شوند.
- این ویژگی فقط زمانی محاسبه می‌شود که داده‌های وابسته تغییر کنند و نتایج در کش ذخیره می‌شوند.
- computed از methods به‌خاطر بهینه‌تر بودن و انجام محاسبات فقط زمانی که نیاز است، ترجیح داده می‌شود.
- شما می‌توانید از computed برای فیلتر کردن، مرتب‌سازی یا انجام محاسبات پیچیده‌تر استفاده کنید.
