إيقاف استخدام واجهة برمجة تطبيقات الخيارات في Vue

Vue 3 طريقة جديدة لإنشاء المكونات تسمى التركيب API. إنه بديل لـ واجهة برمجة تطبيقات الخيارات. تعد واجهة برمجة التطبيقات التركيبية اختيارية بالكامل ولا تحتاج إلى استخدامها إذا كنت تريد استخدام 1TP5555T 3. ومع ذلك، فإنه يقدم بعض التحسينات المهمة التي تجعل عملك أسهل وتحسن من سهولة قراءة الكود.

مزايا واجهة برمجة التطبيقات التركيبية على واجهة برمجة التطبيقات الخيارية

1. تنظيم أفضل للرموز وسهولة قراءتها.

تقدم واجهة برمجة التطبيقات التركيبية طريقة جديدة تسمى الإعداد. بداخله، يمكنك إنشاء جميع العناصر الضرورية للمكون، مثل: البيانات, الأساليب, الخصائص المحسوبة, المراقبون. بفضل هذا، يمكنك الحفاظ على نظافة الشيفرة من خلال وضع المنطق المسؤول عن ميزة معينة في مكان واحد. على النقيض من ذلك، أجبرت واجهة برمجة التطبيقات الخاصة بالخيارات على تشتيت المنطق في جميع أنحاء الملف. ونتيجة لذلك، لم تكن الشيفرة قابلة للقراءة وتطلبت التمرير. في واجهة برمجة التطبيقات التكوينية لم تعد هناك حاجة إلى تجميع طرق واجهة برمجة التطبيقات، لم يعد هناك حاجة إلى تجميعها حسب النوع، يمكنك وضعها كما تراه مناسبًا.

2. استخراج المنطق وإعادة استخدامه.

تسمح لك واجهة برمجة تطبيقات التركيب بكتابة شيفرة تفاعلية في أي مكان. يمكنك سحب بعض الشيفرة التفاعلية خارج المكوّن. يُسمَّى هذا النوع من الشيفرة المواد التركيبية. يمكن استيراد المكوّنات إلى العديد من المكوّنات وتسمح لك بتغليف بعض المنطق وكشف العناصر التفاعلية الضرورية.

// shopping-list.js
استيراد (محسوب) من "vue";

تصدير وظيفة استخدام قائمة التسوق (listId) (
  const products = shoppingList.getAllProducts(listId);
  const productsCount = محسوب ((()) => products.value.length));
  const deleteProduct = (productId) = (productId) => shoppingList.deleteProduct(productId);

  إرجاع (
    المنتجات,
    عدد المنتجات,
    حذف المنتج,
  );
)

// المكون
استورد useSpoppingList من "@/composables/shopping-list.js";
تصدير افتراضي (
  الإعداد () (
    const ( المنتجات، عدد المنتجات، عدد المنتجات، حذف المنتج ) = useSpoppingList();
    إرجاع ( المنتجات، عدد المنتجات، حذف المنتج );
  ),
);

3. استخدام الثوابت والموارد الخارجية بسهولة في المكوّن.

في واجهة برمجة تطبيقات الخيارات، لإضافة قائمة ثابتة من العناصر المستوردة من ملف آخر على سبيل المثال، تحتاج إلى إضافتها إلى البيانات() (مما يؤثر سلبًا على الأداء) أو إضافتها إلى هذا في تم إنشاؤه(). كلا الطريقتين غير أنيقين للغاية. واجهة برمجة التطبيقات التركيبية و الإعداد التي يمكنك من خلالها تصدير ليس فقط الأشياء التفاعلية ولكن أيضًا الثوابت والتبعيات الخارجية.

استيراد قائمة من "./list.json";
تصدير افتراضي (
  إعداد () (
    إرجاع ( قائمة );
  ),
);

4. يمكنك حتى استخدام واجهة برمجة التطبيقات التركيبية في Vue 2.

يعود الفضل في ذلك إلى @Vue/composition-API المكوّن الإضافي، يمكنك استخدام واجهة برمجة التطبيقات التركيبية في 1TP5555T 2 كذلك.

كيف تستخدم واجهة برمجة التطبيقات التركيبية الجديدة؟

<h3>طريقة الإعداد</h3>

الإعداد() هو أسلوب جديد تمت إضافته في 1TP5555T 3 حيث يمكنك وضع جميع العناصر الضرورية مثل كائنات البيانات والطرق وما إلى ذلك. من هناك يمكنك إرجاع العناصر التي تريد تضمينها في القالب.

<template>
  <div>(( العد ))</div>
</template>

استيراد ( المرجع ) من "vue";
تصدير افتراضي (
  إعداد () (
    يشكل العد = المرجع (10);
    إرجاع ( العدد );
  ),
);

تفاعلي()

لإنشاء كائن أو مصفوفة تفاعلية عليك إنشاؤها باستخدام تفاعلي (القيمة الافتراضية) الأسلوب. يمكنك تمرير القيمة الأولية لهذا الكائن عبر وسيطة الأسلوب. تقوم الطريقة بإرجاع الوكيل لهذا الكائن، لذا عند إجراء تغييرات عليه, Vue يعرف عنها ويمكنه تحديث العرض بشكل صحيح.

التركيب API

استيراد (تفاعلي) من "vue";
تصدير افتراضي (
  إعداد () (
    const user = تفاعلي((
      الاسم: "جون",
      الدور: "ADMIN",
    ));
    إرجاع ( المستخدم );
  ),
);

واجهة برمجة تطبيقات الخيارات

تصدير الافتراضي (
  البيانات () (
    إرجاع (
      المستخدم: (
        الاسم: "جون",
        الدور: "ADMIN",
      ),
    );
  ),
);

Reactive فقط لأنواع الكائنات (الكائنات والمصفوفات وأنواع المجموعات مثل الخريطة و مجموعة). لا يمكن أن يحمل أنواعًا بدائية مثل السلسلة, العدد أو منطقية. لذلك يقدم Vue أيضًا المرجع().

المرجع()

لإضافة تفاعلية إلى العناصر البدائية عليك أن تلفها بـ المرجع().

التركيب API

استيراد ( المرجع ) من "vue";
تصدير افتراضي (
  إعداد () (
    يشكل العد = المرجع (10);
    إرجاع ( العدد );
  ),
);

واجهة برمجة تطبيقات الخيارات

تصدير الافتراضي (
  البيانات () (
    إرجاع (
      العدد 10,
    );
  ),
);

تعديل الكائنات التفاعلية

يمكنك تغيير القيم في الكائنات من الطريقة التفاعلية مباشرة، ولكن لتغيير القيم البدائية يجب عليك استخدام القيمة المجال.

استيراد (المرجع، رد الفعل) من "vue";
تصدير الافتراضي (
  الإعداد () (
    const user = تفاعلي((
      الاسم: "جون",
    ));
    user.name = "جون دو"؛ // تغيير القيمة

    const Count = المرجع (10);
    count.value = 20؛ // تغيير القيمة

    إرجاع (
      المستخدم
      العدد
    );
  ),
);

أنت لا تحتاج إلى استخدام القيمة في القالب.

<div>(( العد ))</div>

الخصائص المحسوبة

يمكن إنشاء الخصائص المحسوبة بسهولة عن طريق تمرير طريقة كمعامل إلى الخاصية المستوردة محسوبة() الطريقة.

استيراد (تفاعلي، محسوب) من "vue";
تصدير الافتراضي (
  إعداد () (
    const list = تفاعلي([
      "العنصر 1",
      "العنصر 2",
    ]);

    // محسوب
    const isEmpty = محسوب(() => list.length === 0);

    إرجاع (
      قائمة,
      isEmpty,
    );
  ),
);

الأساليب

يمكنك أيضًا تداخل الطرق في الإعداد الطريقة.

التركيب API

استيراد ( المرجع ) من "vue";
تصدير افتراضي (
  إعداد () (
    يشكل العدد = المرجع (10);

        // الطريقة
    كونت زيادة = () => (
      count.value++;
    );

    إرجاع (
      العد,
      زيادة,
    );
  ),
);

المراقبون

يتم إنشاء المراقبين بطريقة مشابهة لـ محسوبة. ومع ذلك، تذكر أن تمرير الوكيل الكائن، أي الاسم، كما في المثال أدناه، وليس الاسم.القيمة القيمة نفسها.

استيراد (ساعة، مرجع) من "vue";
تصدير الافتراضي (
  إعداد () (
    const name = ref("John");
        // مراقب
    ساعة(اسم، (القيمة الحالية، القيمة القديمة) => (
      console.log(`تغيرت القيمة من $(oldValue) إلى $(currentValue)`));
    ));
    إرجاع (الاسم);
  ),
);

الملخص

في هذه المقالة، أعطيتك فقط أساسيات واجهة برمجة تطبيقات التركيب حتى يكون لديك فهم عام لكيفية اختلافها والمزايا التي تتمتع بها مقارنة بواجهة برمجة تطبيقات الخيارات. توفر واجهة برمجة تطبيقات التركيب أيضًا بدائل لبقية عناصر المكون، مثل الخطافات، ويقدم طرقًا جديدة، مثل مشاهدةالتأثير. من الجيد أن تقرأها في 1TP5555T 3 الوثائق.