0Pricing
Frontend Academy · درس

واجهة Options API: data وmethods وcomputed

عرّف بيانات تفاعلية، واكتب دوال methods تُستدعى من القالب، واستخدم الخصائص المحسوبة للقيم المشتقة التي تتحدّث تلقائيًا.

واجهة Options API: data وmethods وcomputed درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما هي Options API؟

تنظّم Options API منطق المكوّن حسب نوع الخيار: data (الحالة التفاعلية)، وmethods (الدوال)، وcomputed (الحالة المشتقة)، وwatch (الآثار الجانبية)، وخطافات دورة الحياة. يوضع كل منها في خاصية كائن مُسمّاة.

خيار data

يعيد كائناً من الخصائص التفاعلية. جميع الخصائص المُعلنة في data() تفاعلية — إذ تراقبها Vue وتعيد تصيير القالب عند تغيّرها.

export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0,
      user: null as User | null,
    };
  }
}

خيار methods

دوال يمكن استدعاؤها من القالب أو من methods أخرى. داخل methods، تشير this إلى مثيل المكوّن وتوفّر الوصول إلى خصائص data وcomputed.

export default {
  data() { return { count: 0 }; },
  methods: {
    increment() {
      this.count++; // 'this' is the component instance
    },
    decrement() {
      this.count--;
    }
  }
}

خيار computed

تشتق الخصائص المحسوبة قيمها من البيانات التفاعلية. وتُخزّن مؤقتاً — فلا يُعاد حسابها إلا عند تغيّر تبعياتها. استخدمها بدلاً من methods للقيم المشتقة لتجنّب إعادة الحساب غير الضرورية.

export default {
  data() {
    return { items: [], tax: 0.2 };
  },
  computed: {
    itemCount() { return this.items.length; },
    subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
    total() { return this.subtotal * (1 + this.tax); } // uses another computed
  }
}

الخصائص المحسوبة القابلة للكتابة

يمكن أن تحتوي computed على get وset لجعلها قابلة للكتابة — وهذا مفيد للربط ثنائي الاتجاه باستخدام v-model.

computed: {
  fullName: {
    get() { return `${this.firstName} ${this.lastName}`; },
    set(value: string) {
      [this.firstName, this.lastName] = value.split(' ');
    }
  }
}

خيار watch

تنفّذ المراقِبات آثاراً جانبية عند تغيّر خاصية تفاعلية. استخدمها للعمليات غير المتزامنة التي تُشغَّل بسبب تغيّرات البيانات، مثل جلب البيانات عند تغيّر مصطلح البحث.

watch: {
  searchTerm(newVal: string) {
    this.fetchResults(newVal);
  },
  // Deep watch for objects:
  settings: {
    handler(val) { this.saveSettings(val); },
    deep: true
  }
}

خطافات دورة الحياة في Options API

أعلِن عن خطافات دورة الحياة على شكل methods: created وmounted وupdated وunmounted. تُشغَّل created قبل أن يصبح DOM جاهزاً. وتُشغَّل mounted بعد إضافة المكوّن إلى DOM.

export default {
  mounted() {
    this.fetchData(); // runs after component is in the DOM
    this.timer = setInterval(this.tick, 1000);
  },
  unmounted() {
    clearInterval(this.timer); // cleanup
  }
}

الوصول إلى القالب: $refs

أضف سمة ref إلى عنصر في القالب، ثم اعرض عنصر DOM أو المكوّن الابن من خلال this.$refs.name داخل methods. يتوفر ذلك بعد التركيب.

<input ref="emailInput" type="email">

// In mounted():
this.$refs.emailInput.focus();

Mixins مقارنةً بـ Composition API

توفّر Options API mixins لمشاركة المنطق بين المكوّنات. وقد استُبدلت mixins إلى حد كبير بـ composables في Composition API — إذ يصعب فهمها أكثر، كما تعاني من مشكلات تصادم أسماء المساحات. فضّل Composition API في الشيفرة الجديدة.

Options API مقارنةً بـ Composition API

تُعد Options API مناسبة جداً للمكوّنات الصغيرة والمتوسطة، كما يسهل تعلّمها للمبتدئين. أما Composition API ‏(setup() /