آموزش Vue.js: متدها در Vue — بخش هفتم



تعداد بازدید ها:
1

منظور از متد در Vue تابعی مرتبط با یک وهله از Vue است. متدها در Vue درون مشخصه methods تعریف می‌شوند. در این بخش از سری مقالات آموزش Vue.js قصد داریم به بررسی متدهای ویو بپردازیم. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:

چنان که اشاره کردیم متدهای Vue درون مشخصه methods تعریف می‌شوند:


در مورد کامپوننت‌های تک فایلی شیوه تعریف آن‌ها به صورت زیر است:


متدها به طور خاص در مواردی مفید هستند که بخواهیم یک اکشن را اجرا کنیم و یک دایرکتیو v-on روی یک عنصر برای مدیریت رویداد الصاق شده باشد. در اکشن زیر می‌بینیم که وقتی عنصر کلیک می‌شود، handleClick فراخوانی می‌شود:


ارسال پارامترها به متدهای Vue.js

متدها می‌توانند پارامتر نیز بگیرند. به این منظور کافی است پارامتر در قالب ارسال کنید:




در مورد کامپوننت‌های تک فایلی به صورت زیر عمل می‌کنیم:


شیوه دسترسی به داده‌های یک متد

با استفاده از this. می‌توان به همه مشخصه‌های داده‌ای کامپوننت‌های Vue دسترسی یافت:


لازم نیست که از this.data.name استفاده کنیم و this.name کفایت می‌کند. Vue یک اتصال شفاف برای ما ایجاد می‌کند. استفاده از this.data.name منجر به بروز خطا خواهد شد. همان طور که در بخش قبلی در مورد رویدادها دیدیم، متدها ارتباط بسیار نزدیکی با رویدادها دارند زیرا به عنوان دستگیره‌های رویداد استفاده می‌شوند. هر بار که رویدادی رخ می‌دهد یک متد فراخوانی می‌شود.

Watcher

Watcher یک قابلیت خاص Vue.js است که امکان تحت نظر گرفتن یک مشخصه از حالت کامپوننت را فراهم می‌سازد و زمانی که مقدار مشخصه تغییر یابد تابعی را اجرا می‌کند. به مثال زیر توجه کنید. در این مثال کامپوننتی داریم که یک نام را نمایش می‌دهد و امکان تغییر دادن آن را با کلیک کردن یک دکمه فراهم ساخته است:


زمانی که نام تغییر پیدا کند باید کاری مانند پرینت کردن چیزی در لاگ کنسول انجام دهیم. این کار از طریق افزودن یک مشخصه به نام مشخصه‌ی داده‌ای که می‌خواهیم تحت نظر بگیریم به شیء watch میسر است:


تابع انتساب یافته به watch.name می‌تواند به طور اختیاری 2 پارامتر بگیرد. پارامتر اول مقدار مشخصه جدید و دومی مقدار مشخصه قدیمی است:


Watcher-ها چنان که در مورد مشخصه‌های محاسبه‌شده انجام می‌دادیم، نمی‌توانند از روی قالب بررسی شوند.

مشخصه‌های محاسبه‌شده

در این بخش به توضیح مفهوم «مشخصه‌های محاسبه‌شده» (Computed Properties) می‌پردازیم.

مشخصه‌های محاسبه‌شده چه هستند؟

در Vue.js می‌توان هر مقدار داده‌ای را با استفاده از پرانتز در خروجی ارائه کرد:


این مشخصه می‌تواند میزبان محاسبات کوچکی باشد. به مثال زیر توجه کنید:


اما در این روش محدود به یک عبارت منفرد جاوا اسکریپت هستیم. علاوه بر این محدودیت تکنیکی، باید این نکته را در نظر داشته باشید که قالب‌ها باید تنها به نمایش داده‌ها برای کاربر بپردازند و اجرای محاسبات منطقی وظیفه آن‌ها نیست.

برای انجام کاری بیش از یک عبارت منفرد، و برای این که قالب‌های دستوری‌تر داشته باشیم، باید از مشخصه محاسبه‌شده استفاده کنیم. مشخصه‌های محاسبه‌شده در مشخصه computed کامپوننت Vue تعریف می‌شوند:


نمونه‌ای از یک مشخصه محاسبه‌شده

در ادامه مثالی را بررسی می‌کنیم که از یک مشخصه محاسبه‌شده به نام count برای محاسبه خروجی استفاده می‌کند. توجه داشته باشید که ما ملزم به فراخوانی ()count نیستیم. Vue.js تابع را به صورت خودکار فراخوانی می‌کند.

ما از یک تابع معمولی (نه یک تابع arrow) برای تعریق مشخصه محاسبه‌شده با نام count استفاده می‌کنیم، زیرا باید بتوانیم از طریق this به وهله کامپوننت دسترسی پیدا کنیم.


مقایسه مشخصه‌های محاسبه‌شده و متدها

اینک که با متدهای Vue و مشخصه‌های محاسبه‌شده آشنا شدید شاید کنجکاو باشید که تفاوت آن‌ها در چیست. اولین تفاوت این است که متدها باید فراخوانی شوند و ارجاع دادن به آن‌ها کافی نیست، بنابراین باید به صورت زیر عمل کنید:


اما تفاوت اصلی این است که مشخصه‌های محاسبه‌شده کَش می‌شوند. نتیجه مشخصه محاسبه‌شده count به صورت داخلی تا زمانی که مشخصه داده‌ای items تغییر نیافته است، کش می‌شود.

نکته مهم: مشخصه‌های محاسبه‌شده تنها زمانی به‌روزرسانی می‌شوند که منابع واکنشی به‌روز شوند. متدهای معمولی جاوا اسکریپت واکنشی نیستند و از این رو مثال رایجی که برای نمایش این تفاوت استفاده می‌شود Date.now() است:


این متد یک بار رندر می‌شود و سپس حتی زمانی که کامپوننت مجدداً رندر شود، رندر مجدد نخواهد شد. تنها در صورت رفرش شدن صفحه به‌روزرسانی می‌شود و این زمانی است که کامپوننت Vue ترک شود و از نو راه‌اندازی شود. در این حالت متد برای رفع نیازها مناسب‌تر خواهد بود.

مقایسه متد با Watcher و مشخصه‌های محاسبه‌شده

اکنون که با متدها، Watcher-ها و مشخصه‌های محاسبه‌شده آشنا شدیم، به مقایسه آن‌ها و کاربردهای هر کدام می‌پردازیم. پاسخ این سؤال به شرح زیر است.

چه زمانی از متد استفاده کنیم؟

  • برای واکنش به رویدادی که در DOM اتفاق می‌افتد.
  • برای فراخوانی یک تابع هنگامی که اتفاقی در کامپوننت می‌افتد. متد را می‌توان از مشخصه‌های محاسبه‌شده یا Watcher ها فراخوانی کرد.

چه زمانی از مشخصه‌های محاسبه‌شده استفاده کنیم؟

  • زمانی که باید داده‌های جدیدی از منابع داده‌ای موجود تشکیل دهیم.
  • متغیری داشته باشیم که در قالب استفاده کنیم و از یک یا چند مشخصه ساخته شده باشد.
  • بخواهیم یک نام مشخصه پیچیده و تو در تو را به چیزی که خوانایی بیشتری دارد و استفاده از آن نیز ساده‌تر است کاهش دهیم (اما زمانی به‌روزرسانی می‌شود که مشخصه اصلی تغییر پیدا کند.)
  • به ارجاعی به یک مقدار از قالب نیاز داشته باشیم. در این مورد ایجاد یک مشخصه محاسبه‌شده بهترین کار است زیرا کش می‌شود.
  • نیاز باشد به تغییرهای بیش از یک مشخصه داده‌ای گوش دهیم.

چه زمانی از Watcher-ها استفاده کنیم؟

  • زمانی که بخواهیم ببینیم چه زمانی مشخصه داده‌ای تغییر می‌یابد و اکشن خاصی اجرا کنیم.
  • بخواهیم به تغییر مقدار یک prop گوش دهیم.
  • لازم باشد صرفاً به یک مشخصه خاص گوش دهیم (و نتوانیم به چندین مشخصه به صورت همزمان توجه کنیم).
  • بخواهیم مشخصه داده‌ای را تا زمانی که به مقدار معینی می‌رسد تحت نظر قرار دهیم و سپس کار مشخصی انجام دهیم.

Props برای ارسال داده به کامپوننت‌های فرزند

Props روشی هستند که کامپوننت‌ها می‌توانند داده‌ها را از کامپوننت‌هایی والدشان هستند بپذیرند. زمانی که یک کامپوننت یک یا چند prop قبول می‌کند، باید آن‌ها را در مشخصه props خود تعریف کند:


در مورد کامپوننت‌های تک فایلی به صورت زیر عمل می‌کنیم:


پذیرش چندین props

با الحاق props به یک آرایه می‌توان چند مورد از آن‌ها را با هم داشت:


تعیین نوع props

نوع props را می‌توان با استفاده از یک شیء به جای یک آرایه تعیین کرد. به این منظور از نام مشخصه به عنوان کلید هر مشخصه و از نوع به عنوان مقدار آن استفاده می‌کنیم:


انواع مجاز که می‌توان استفاده کرد به شرح زیر هستند:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

زمانی که ناسازگاری نوع پدید می‌آید، Vue (اگر در حالت توسعه باشد) هشداری در کنسول ارائه می‌کند. نوع‌های props می‌توانند دسته‌بندی شوند. بدین ترتیب می‌توان انواع مقدار متفاوتی داشت:


الزامی ساختن prop

می‌توان یک prop را به صورت الزامی تعیین کرد:


تعیین مقدار پیش‌فرض یک prop

برای یک prop می‌توان مقدار پیش‌فرض تعیین کرد


در مورد اشیا به صورت زیر عمل می‌کنیم:


Default می‌تواند به جای یک مقدار واقعی، یک تابع نیز باشد که مقدار مناسب را بازگشت می‌دهد. حتی می‌توان یک validator سفارشی ساخت که در مورد داده‌های پیچیده مناسب‌تر است:


ارسال props به کامپوننت

اگر چیزی که ارسال می‌شود یک مقدار استاتیک باشد، با استفاده از ساختار زیر می‌توان یک prop را به کامپوننت ارسال کرد:


اگر یک مشخصه داده‌ای است، می‌توان از ساختار زیر بهره گرفت:


می‌توانید از عملگر سه‌تایی درون مقدار prop برای بررسی شرط درست بودن و ارسال یک مقدار که به آن وابسته است استفاده کنید:


بدین ترتیب به پایان بخش هفتم از سری مقالات آموزش فریمورک Vue.js می‌رسیم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

به عنوان حامی، استارتاپ، محصول و خدمات خود را در انتهای مطالب مرتبط مجله فرادرس معرفی کنید.

telegram
twitter