هاتان طريقتان لكتابة مكونات Vue. يقوم Options API بتنظيم الكود حسب نوع الخيار (data و methods و computed)؛ بينما يقوم Composition API بتنظيم الكود حسب الاهتمام المنطقي باستخدام دوال مثل ref و و .
هاتان طريقتان لكتابة مكونات Vue. يقوم Options API بتنظيم الكود حسب نوع الخيار (data و methods و computed)؛ بينما يقوم Composition API بتنظيم الكود حسب الاهتمام المنطقي باستخدام دوال مثل ref و و .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
كل شيء مجمع في حاويات ثابتة (data و methods و computed ودورة الحياة). بسيط وقابل للاكتشاف، لكن منطق ميزة واحدة ينتشر عبر تلك الحاويات.
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
الحالة والـ computed والـ methods ودورة الحياة لاهتمام واحد تجلس معاً، و <script setup> يجعلها موجزة (بدون this وبدون return).
يتيح لك Composition API استخراج وإعادة استخدام منطق حالة كدوال عادية (composables):
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
هذا يحل بشكل نظيف مشكلة إعادة استخدام المنطق، والتي كانت محرجة في Options API (كانت mixins تسبب تصادمات في الأسماء ومصادر غير واضحة).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Composition API (مع <script setup>) هو الخيار الموصى به افتراضياً لمشاريع Vue 3 الجديدة، خاصة مع TypeScript.
Composition API هو إجابة Vue 3 على تنظيم وإعادة استخدام منطق المكون.
فهم أنه ينظم الكود حسب الميزة (وليس حسب نوع الخيار) وينمّي composables — مقابل حاويات Options API القائمة على الخيارات — يوضح أسلوب Vue الحديث والسبب في أن المكونات المعقدة و codebases التي تستخدم TypeScript تفضله.
كلاهما مدعوم بالكامل؛ يمكنك حتى دمج الاثنين.