تفاوت Data و Computed Properties در Vue.js | آموزش کاربردی و مثال‌محور

در Vue.js، data و computed properties دو ابزار مهم برای مدیریت داده‌ها و ساختاردهی منطقی کد هستند. با این دو ابزار می‌توانیم به‌طور مؤثری داده‌ها و وضعیت برنامه را کنترل کنیم و بدون افزایش پیچیدگی، عملیات محاسباتی مختلفی را پیاده‌سازی کنیم. در این مقاله، به تفاوت‌ها و نحوه کار با data و computed properties می‌پردازیم.

درک data در Vue.js

data در Vue.js، به عنوان یک شیء ذخیره‌کننده داده‌ها برای Component عمل می‌کند. این داده‌ها به صورت پویا به رابط کاربری وصل می‌شوند و به کمک ویژگی دوطرفه‌بودن Vue.js (Two-Way Binding) به صورت خودکار به‌روزرسانی می‌شوند.

مثال ساده از data در Vue.js:

new Vue ( {
  el : ' #app ' ,
  data ( ) {
    return {
      message : ' Hello Vue ! ' ,
      count : 0
    } ;
  }
} ) ;

در این مثال:

• message و count دو متغیر هستند که به عنوان داده‌های قابل دسترس در Component تعریف شده‌اند.

• هر بار که مقدار count یا message در Component تغییر کند، Vue.js به‌طور خودکار این تغییر را در DOM نمایش می‌دهد.

آشنایی با computed properties در Vue.js

computed properties در Vue.js، ویژگی‌های محاسباتی هستند که بر اساس داده‌های data تعریف می‌شوند. این ویژگی‌ها زمانی مورد استفاده قرار می‌گیرند که نیاز به محاسباتی بر اساس چندین داده مختلف باشد. محاسبات انجام شده توسط computed properties به صورت خودکار ذخیره می‌شود (Cached) و تنها در صورت تغییر در داده‌های وابسته دوباره محاسبه می‌شود.

مثال ساده از computed properties:

new Vue({
  el : ' #app ' ,
  data ( ) {
    return {
      firstName : ' John ' ,
      lastName : ' Doe '
    } ;
  } ,
  computed : {
    fullName ( ) {
      return ` $ { this.firstName } $ { this.lastName } ` ;
    }
  }
} ) ;

در این مثال، fullName یک computed property است که مقدار آن بر اساس firstName و lastName محاسبه می‌شود. اگر مقدار یکی از این دو داده تغییر کند، Vue.js به‌طور خودکار مقدار fullName را به‌روزرسانی می‌کند.

تفاوت‌های اصلی بین data و computed properties

مثال:

فرض کنید یک فرم با داده‌های firstName، lastName و age دارید. از data برای ذخیره این اطلاعات استفاده می‌شود، اما برای محاسبه مقدار fullName (ادغام firstName و lastName) می‌توان از computed property استفاده کرد.

چه زمانی از data و computed properties استفاده کنیم؟

• استفاده از data: اگر نیاز به ذخیره داده‌ها و متغیرهای اولیه دارید، از data استفاده کنید.

• استفاده از computed properties: اگر به داده‌هایی نیاز دارید که بر اساس یک یا چند متغیر دیگر محاسبه شوند، از computed properties بهره ببرید.

مقایسه Computed Properties با Methods

گاهی به نظر می‌رسد که می‌توانیم به جای computed properties از متدهای ساده (methods) استفاده کنیم، اما تفاوت‌هایی وجود دارد:

• computed properties تنها در زمانی که داده‌های وابسته به آن‌ها تغییر کند، دوباره محاسبه می‌شوند. این ویژگی عملکرد را بهبود می‌بخشد.

• methods هر بار که فراخوانی شوند، مجددا اجرا می‌شوند، حتی اگر داده‌ها تغییر نکرده باشند.

مثال ترکیبی از data و computed properties

در این مثال، یک Vue instance داریم که شامل داده‌های price و quantity است و یک computed property به نام totalCost که قیمت کل را محاسبه می‌کند.

new Vue ( {
  el: ' #app ' ,
  data ( ) {
    return {
      price : 100,
      quantity : 2
    } ;
  } ,
  computed : {
    totalCost ( ) {
      return this.price * this.quantity ;
    }
  }
} ) ;

در این مثال، totalCost تنها زمانی به‌روزرسانی می‌شود که price یا quantity تغییر کنند، و این ویژگی باعث بهبود کارایی می‌شود.

محدودیت‌ها و نکات مربوط به computed properties

• از عملیات غیرهمزمان (Async) در computed properties استفاده نکنید: چرا که computed properties انتظار دارند به‌طور همزمان و سریع نتیجه‌ای را بازگردانند. اگر نیاز به عملیات غیرهمزمان دارید، بهتر است از methods یا watchers استفاده کنید.

• استفاده از computed properties برای بهبود عملکرد: در مواقعی که محاسبات سنگین دارید، از computed properties برای کاهش تعداد محاسبات و بهینه‌سازی استفاده کنید.

نتیجه‌گیری

در Vue.js، data برای ذخیره و مدیریت داده‌های اولیه استفاده می‌شود، در حالی که computed properties برای محاسبات وابسته به داده‌ها و ذخیره‌سازی نتایج به‌طور خودکار استفاده می‌شوند. با درک تفاوت‌ها و استفاده صحیح از این دو ابزار، می‌توانید عملکرد و خوانایی کد خود را بهبود بخشید.