در Vue.js، ویژگی‌های محاسبه‌شده و ناظران ابزارهای قدرتمندی برای مدیریت و واکنش به داده‌های واکنشی هستند. درک این ویژگی ها برای ساخت برنامه های کارآمد و پاسخگو Vue.js ضروری است. در این مقاله، با استفاده از Composition API، ویژگی‌های محاسبه‌شده و ناظران را با جزئیات، از نمونه‌های مبتدی تا پیشرفته، بررسی می‌کنیم. بیایید شیرجه بزنیم!
ویژگی های محاسبه شده و ناظران چیست؟
ویژگی های محاسبه شده
ویژگی های محاسبه شده، ویژگی های داده واکنشی هستند که به سایر ویژگی های داده واکنشی بستگی دارند. آنها بر اساس وابستگی هایشان در حافظه پنهان ذخیره می شوند و تنها زمانی که یکی از آن وابستگی ها تغییر کند دوباره ارزیابی می شوند. خواص محاسبه شده برای منطق پیچیده که به داده های واکنشی بستگی دارد ایده آل هستند.
مزایای ویژگی های محاسبه شده:
- ذخیره سازی: ویژگی‌های محاسبه‌شده بر اساس وابستگی‌هایشان در حافظه پنهان ذخیره می‌شوند و باعث کارآمدی آنها می‌شوند. آنها فقط زمانی دوباره محاسبه می کنند که یکی از وابستگی هایشان تغییر کند.
- اعلامی: ویژگی های محاسبه شده راهی واضح و شفاف برای توصیف حالت مشتق شده ارائه می دهد و کد شما را خواناتر و قابل نگهداری تر می کند.
- منطق را ساده می کند: آنها برای کپسوله کردن محاسبات پیچیده یا منطقی که به داده های واکنشی بستگی دارد عالی هستند.
زمانی که از ویژگی های محاسبه شده استفاده نکنید:
- اثرات جانبی: از استفاده از ویژگی های محاسبه شده برای عوارض جانبی مانند تماس های API یا ورود به سیستم خودداری کنید. ویژگی های محاسبه شده باید خالص باشند و فقط مقادیر را بر اساس وابستگی هایشان برگردانند.
- عملیات ناهمزمان: برای عملیات ناهمزمان مناسب نیستند، زیرا به صورت همزمان طراحی شده اند.
ناظران
Watcher به شما امکان می دهد در پاسخ به تغییر داده های واکنشی، عوارض جانبی را انجام دهید. برخلاف ویژگی‌های محاسبه‌شده، که برای حالت مشتق‌شده استفاده می‌شوند، تماشاگرها عمدتاً برای اجرای کد در واکنش به تغییرات، مانند برقراری تماس‌های API یا ثبت‌نام استفاده می‌شوند.
مزایای Watchers:
- انعطاف پذیری: ناظران انعطاف پذیری بیشتری برای اجرای کد در پاسخ به تغییرات داده ارائه می دهند. آنها می توانند منطق پیچیده ای را که باید هنگام تغییر داده ها اجرا شود، مدیریت کنند.
- اثرات جانبی: ایده آل برای انجام عوارض جانبی مانند عملیات ناهمزمان، ثبت گزارش یا تبدیل داده های پیچیده که توسط تغییرات در داده های واکنشی ایجاد می شوند.
زمانی که از مراقب ها استفاده نکنید:
- محاسبات ساده: برای حالت های مشتق شده ساده یا محاسبات، از ویژگی های محاسبه شده به جای تماشاگر استفاده کنید. ناظران برای این سناریوها زیاده روی می کنند.
- منطق اعلامی: اگر بتوانید با یک ویژگی محاسبه شده به همان نتیجه برسید، استفاده از ویژگی محاسبه شده اغلب واضح تر و قابل نگهداری تر است.
با استفاده از Composition API
راه اندازی پروژه
قبل از شروع، مطمئن شوید که Vue.js را نصب کرده اید. با استفاده از Vue CLI یک پروژه جدید راه اندازی کنید:
npm install -g @vue/cli
vue create vue-computed-watcher
cd vue-computed-watcher
npm run serve
مثال پایه با ویژگی های محاسبه شده
بیایید با یک مثال اساسی از خصوصیات محاسبه شده با استفاده از Composition API شروع کنیم.
قالب:
Basic Computed Property Example
Original Message: {{ message }}
Reversed Message: {{ reversedMessage }}
اسکریپت:
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const message = ref('Hello Vue.js');
const reversedMessage = computed(() => {
return message.value.split('').reverse().join('');
});
return {
message,
reversedMessage
};
}
};
</script>
-
داده های واکنشی:
messageیک ویژگی داده واکنشی است که با استفاده ازref. -
ویژگی محاسبه شده:
reversedMessageیک ویژگی محاسبه شده است که بهmessage. هر زمان رشته را برعکس می کندmessageتغییر می کند.
مثال پیشرفته با ویژگی های محاسبه شده
حال، بیایید یک مثال پیشرفتهتر ایجاد کنیم که شامل وابستگیهای متعدد است و قدرت خواص محاسبه‌شده را نشان میدهد.
قالب:
Advanced Computed Property Example
Items: {{ items.map(item => item.name).join(', ') }}
Total Price: {{ totalPrice }}
اسکریپت:
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const items = ref([
{ name: 'Apple', price: 1.2 },
{ name: 'Banana', price: 0.8 },
{ name: 'Cherry', price: 2.5 }
]);
const totalPrice = computed(() => {
return items.value.reduce((total, item) => total + item.price, 0).toFixed(2);
});
return {
items,
totalPrice
};
}
};
</script>
-
داده های واکنشی:
itemsآرایه ای از اشیاء است که هر کدام نشان دهنده یک آیتم با نام و قیمت است. -
ویژگی محاسبه شده:
totalPriceمجموع قیمت اقلام را محاسبه میکند و با تغییر آرایه اقلام بهطور خودکار بهروزرسانی میشود.
مثال پایه با Watchers
Watcher ها برای واکنش به تغییرات داده ها، مانند برقراری تماس API یا ثبت اطلاعات مفید هستند.
قالب:
اسکریپت:
<script>
import { ref, watch } from 'vue';
export default {
setup() {
const name = ref('');
const greeting = ref('Hello!');
watch(name, (newValue) => {
greeting.value = `Hello, ${newValue}!`;
});
return {
name,
greeting
};
}
};
</script>
-
داده های واکنشی:
nameوgreetingویژگی های داده واکنشی هستند. -
ناظر: ناظر مشاهده می کند
nameو به روز رسانیgreetingهر زمان کهnameتغییر می کند.
مثال پیشرفته با Watchers
برای مثال پیشرفته، بیایید یک عملیات ناهمزمان را در یک تماشاگر انجام دهیم.
قالب:
اسکریپت:
<script>
import { ref, watch } from 'vue';
export default {
setup() {
const query = ref('');
const user = ref(null);
const loading = ref(false);
const error = ref(null);
const fetchUser = async (username) => {
loading.value = true;
error.value = null;
user.value = null;
try {
const response = await fetch(`https://api.github.com/users/${username}`);
if (!response.ok) throw new Error('User not found');
user.value = await response.json();
} catch (err) {
error.value = err.message;
} finally {
loading.value = false;
}
};
watch(query, (newQuery) => {
if (newQuery) fetchUser(newQuery);
});
return {
query,
user,
loading,
error
};
}
};
</script>
-
داده های واکنشی:
query،user،loading، وerrorویژگی های داده واکنشی هستند. -
ناظر: ناظر روشن است
queryباعث می شودfetchUserعملکرد هر زمانqueryتغییرات، انجام یک فراخوانی API ناهمزمان برای واکشی داده های کاربر GitHub.
ویژگی های محاسبه شده و ناظران ابزارهای ضروری در Vue.js برای مدیریت و واکنش به داده های واکنشی هستند. ویژگی های محاسبه شده برای حالت مشتق شده که به سایر داده های واکنشی وابسته است، ایده آل هستند و راهی روشن و کارآمد برای مدیریت منطق پیچیده ارائه می دهند. از سوی دیگر، Watchers برای اجرای کد در پاسخ به تغییرات داده انعطافپذیری ارائه میدهد و آنها را برای عوارض جانبی مانند تماس‌های API عالی میکند.
با درک و استفاده مؤثر از ویژگی‌های محاسبه‌شده و ناظران، میتوانید برنامههای Vue.js کارآمدتر، پاسخگو و قابل نگهداری بسازید. چه مبتدی باشید و چه به دنبال ارتقای مهارت های خود باشید، تسلط بر این مفاهیم تجربه توسعه Vue.js شما را به میزان قابل توجهی افزایش می دهد. کد نویسی مبارک!
توییتر: @delia_code
اینستاگرام:@delia.codes
وبلاگ: https://delia.hashnode.dev/
