Vue / المتوسط: حالة الميزة وملكية الأثر / الدرس 11
عقود composables والمنطق التفاعلي المعاد
استخرج السلوك المعاد دون فقد تفاعلية المصدر أو الملكية أو التنظيف.
في هذه الصفحة
أهداف الدرس
- حدد المدخل كقيمة أو مرجع أو getter بقصد.
- أعد واجهة تفاعلية صغيرة بعمر واضح.
استخرج السلوك لا أسطراً اعتباطية
composable دالة تستخدم Composition API لتغليف منطق تفاعلي معاد، وتختلف عن الأداة الخالصة بإنشاء الحالة والأثر والعمر. استخرج قدرة متماسكة بمدخل ومخرج وعمليات وتنظيف. لا يتحسن الطويل بنقل جسمه لدالة غامضة. احفظ وضوح التحقق والعرض والخدمة، وقلل تكرار القرار مع شرح المالك والتصفير.
طبّع المدخل داخل الحساب المتتبع
قد يمرر المستدعي قيمة أو مرجعاً أو getter. تكسر القراءة الواحدة وعد متابعة التغير. تطبع toValue المدعوم وتستدعي getter لكن القراءة داخل حساب أو أثر متتبع عند الحاجة. يحسب المثال الاستعلام الحالي وتدعمها 3.5 لا كل قديم. يعبر المرجع المحسوب المعاد عن مشتق لا يعدله المستهلك.
import { computed, toValue } from "vue"
export function useNormalizedQuery(source) {
const normalized = computed(() => String(toValue(source) ?? "").trim())
return { normalized }
}يتطلب Vue ومدخلاً مدعوماً. يتبع الحساب تغير المصدر من نص بمسافات لآخر، ولا ينفذ الإدخال والإخراج أو يدعي اختبار تشغيل الإطار.
مرر علاقة الخاصية الحية صراحة
يمتلك الأب query، ويحفظ getter الوصول لا لقطة بدائية. يعمل النمط دون تفكيك المترجم أيضاً فيوضح الحد. يعرض المكوّن التطبيع بلا تعديل أب أو طلب. إذا صار مدخل طلب فأضف الملكية والإبطال هناك، ولا تولد أداة التطبيع حركة خفية لمجرد القراءة.
<script setup>
import { useNormalizedQuery } from "./composables/useNormalizedQuery.js"
const props = defineProps({ query: { type: String, required: true } })
const { normalized } = useNormalizedQuery(() => props.query)
</script>
<template>
<p>Normalized query: {{ normalized }}</p>
</template>يتطلب الأداة السابقة وخاصية الأب. ينتج المدخل " notes " النص notes. لم ينفذ تفاعل الملف والمترجم ويبقى غير قابل للتشغيل هنا.
أعد الحالة والأفعال بملكية متوقعة
يعاد غالباً كائن عادي بمراجع ودوال فيحفظ التفكيك الهوية. قد يختلف تفكيك كائن reactive فوثقه. حدد حق تعديل المرجع أو لزوم عملية تحفظ الشرط. تعطي حالة كل استدعاء استقلالاً وتشترك حالة الوحدة وقد تسرب في SSR. لا تخف singleton باسم يوحي بالمحلي؛ ضمّن التصفير والمخبأ والدوام بالعقد.
اختبر القواعد الخالصة وتكامل العمر منفصلين
تختبر الأداة المحسوبة بتغير المصدر في بيئة Vue مناسبة، وتحتاج ذات الخطاف سياق مكوّن وربطاً وإزالة. احقن الخدمة لضبط النتائج بلا شبكة، وأظهر التنظيف والخطأ والتكرار. تختبر أداة النص الخالصة مستقلة بـ Node ولا يثبت ذلك تتبع Vue. طابق الحد بالادعاء واذكر غير المختبر بصدق.
الأخطاء الشائعة وإصلاحها
يتبع composable مدخله الأول فقط
- لماذا يحدث؟
- طبع المصدر مرة خارج التتبع.
- كيف تصلحه؟
- اقرأه داخل الحساب أو الأثر المناسب.
- كيف تتجنب تكراره؟
- اختبر تغير المدخل بعد التهيئة.
يشترك مستهلكان بمسودة دون قصد
- لماذا يحدث؟
- خصصت الحالة بنطاق الوحدة.
- كيف تصلحه؟
- أنشئ حالة لكل استدعاء أو وثق الاشتراك.
- كيف تتجنب تكراره؟
- راجع النطاق وSSR.
تستدعى أداة دورة خارج setup
- لماذا يحدث؟
- أُخفي مطلب السياق.
- كيف تصلحه؟
- استدعها بمالك صحيح أو أعد تصميم الإيقاف.
- كيف تتجنب تكراره؟
- وثق متطلبات الإعداد والتنظيف.
اختبر فهمك
1. لماذا يعاد كائن مراجع لا بدائيات منسوخة؟
اعرض الحل المشروح
تحفظ المراجع الواجهة الحية بعد التفكيك وتحفظ البدائيات لحظة فقط. وثق مع ذلك حق التعديل والعمر؛ لا تحدد التفاعلية الملكية وحدها.
2. يبدأ composable طلباً من getter محسوب. ماذا يتغير؟
اعرض الحل المشروح
اجعل الاشتقاق خالصاً وانقل الطلب لأثر بمصدر وإلغاء وخطأ ومالك. لا تخف آثاراً متكررة مع كل قراءة.
أهم ما تعلمته
- للمدخل عقد لقطة أو مصدر حي.
- يحدد النطاق وشكل الإعادة سلوك الملكية.
- تبقى الآثار ومتطلبات العمر ظاهرة.