المهارات vue-options-api-best-practices
📦

vue-options-api-best-practices

v2.0.0 مراجعة المحتوى r1 آمن ⚙️ الأوامر الخارجية🌐 الوصول إلى الشبكة

تحسين مكونات Vue Options API

يمكن لمشاريع Vue Options API أن تفقد أمان الأنواع والربط الصحيح لـ this. توفر هذه المهارة أنماطًا مباشرة لمكونات Vue أكثر أمانًا.

يدعم: Claude Codex Code(CC)
🥈 81 فضي

التثبيت باستخدام Agent لدي

انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.

طلب الوكيل
Review the Skillstore skill "vue-options-api-best-practices" from https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices.md and its manifest at https://skillstore.io/api/skills/vuejs-ai-vue-options-api-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.

موارد مهيّأة لـ Agents

استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.

تفاصيل Markdown GET /skills/vuejs-ai-vue-options-api-best-practices.md manifest موقَّع GET /api/skills/vuejs-ai-vue-options-api-best-practices/manifest lockfile موقَّع GET /api/skills/vuejs-ai-vue-options-api-best-practices/lockfile

اختبرها

جارٍ استخدام "vue-options-api-best-practices". يستخدم خطاف mounted دالة سهمية ولا يمكنه قراءة بيانات المكون.

النتيجة المتوقعة:

يجب أن يستخدم الخطاف صياغة دالة عادية أو اختصار الطريقة. عندها يمكن لـ Vue ربط this بنسخة المكون.

جارٍ استخدام "vue-options-api-best-practices". يقبل مكون خاصية user object ويستنتج TypeScript نوع object واسعًا.

النتيجة المتوقعة:

عرّف واجهة User واستخدم Vue PropType للخاصية. أضف تحققًا وقت التشغيل إذا كان يجب فحص شكل الكائن.

جارٍ استخدام "vue-options-api-best-practices". تتصرف طريقة مؤجلة باستخدام debounce بشكل غير صحيح عبر نسخ متكررة من المكون.

النتيجة المتوقعة:

أنشئ الدالة المؤجلة باستخدام debounce لكل نسخة في خطاف دورة حياة. ألغِ المؤقتات أثناء unmount لتجنب الحالة المشتركة والتسريبات.

التدقيق الأمني

آمن
v4 • ٧‏/٧‏/٢٠٢٦ فتح التقرير المرتبط بالإصدار

The static alerts are false positives caused by Markdown code fences, TypeScript template literals, Vue documentation links, and DOM event property names. No prompt injection, secret handling, command execution, or executable network behavior was found in the reviewed skill content.

11
الملفات التي تم فحصها
1,509
الأسطر التي تم تحليلها
0
عناصر المراجعة
0
تم تجاهل الإيجابيات الكاذبة

عوامل الخطر

⚙️ الأوامر الخارجية (8)
reference/no-arrow-functions-in-lifecycle-hooks.md:27-44 reference/no-arrow-functions-in-lifecycle-hooks.md:68-74 reference/no-arrow-functions-in-methods.md:28-38 reference/no-arrow-functions-in-methods.md:60-65 reference/ts-options-api-computed-return-types.md:79-84 reference/ts-options-api-computed-return-types.md:84-88 reference/ts-options-api-computed-return-types.md:106-116 reference/ts-strict-mode-options-api.md:120-124
🌐 الوصول إلى الشبكة (1)
reference/no-arrow-functions-in-methods.md:57
لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.
دقّقه: codex عرض سجل التدقيق →
شارك واستشهد بهذا التقرير

شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.

فتح التقرير المرتبط بالإصدار
تقييم الأمان

نسخ رابط التقرير

https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

شارة Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/vuejs-ai-vue-options-api-best-practices/security.svg)](https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices?utm_source=security_passport_badge)

شارة HTML

<a href="https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vuejs-ai-vue-options-api-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

بطاقة قابلة للتضمين

<iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-options-api-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
الاستشهادات الأكاديمية (APA · BibTeX · CFF)

اقتباس APA

github.com/vuejs-ai. (2026). vue-options-api-best-practices security audit report (audit version 4) [Author version 2.0.0]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4

اقتباس BibTeX

@techreport{github-com-vuejs-ai-vuejs-ai-vue-options-api-best-practices-2026, author = {github.com/vuejs-ai}, title = {vue-options-api-best-practices security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4}, note = {Author version 2.0.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "vue-options-api-best-practices security audit report (audit version 4)" version: "2.0.0" type: report authors: - name: "github.com/vuejs-ai" date-released: "2026-07-07" url: "https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4" identifiers: - type: other value: "skillstore:vuejs-ai-vue-options-api-best-practices:audit:4" description: "Skillstore immutable audit report identifier"

تقييم Skillstore

سبب هذا التقييم موثوقية الأدلة: مرتفع
55
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
69
المجتمع
91
الامتثال للمواصفات

ما الذي يمكنك بناؤه

إصلاح أخطاء ربط This

استخدم مراجع دورة الحياة والطرق للعثور على الدوال السهمية التي تعطل الوصول إلى نسخة المكون.

تعزيز مكونات TypeScript

طبّق defineComponent و PropType والوضع الصارم وأنواع الإرجاع الصريحة في مكونات Options API الحالية.

مراجعة كود Vue القديم

تحقق من مكونات Options API القديمة بحثًا عن الطرق ذات الحالة المشتركة، وضعف كتابة الأحداث، وأنماط التحقق القديمة.

جرّب هذه الموجّهات

العثور على مشكلة ربط This 
راجع مكون Vue Options API هذا واشرح لماذا this غير معرّف. ركز على الطرق وخطافات دورة الحياة. [Paste component]
إضافة خصائص TypeScript 
ساعدني في كتابة خصائص Vue Options API هذه باستخدام TypeScript. ضمّن إرشادات PropType للكائنات والمصفوفات والدوال. [Paste props]
تحسين معالجات الأحداث 
راجع معالجات أحداث Options API هذه. أوصِ بأنواع أحداث صريحة وتعامل أكثر أمانًا مع target. [Paste methods and template]
تدقيق ممارسات المكون 
دقق مكون Vue Options API هذا من حيث ربط this ودعم TypeScript الصارم وأنواع إرجاع computed والطرق ذات الحالة. [Paste component]

أفضل الممارسات

  • استخدم اختصار الطريقة أو الدوال العادية لطرق Options API وخطافات دورة الحياة.
  • غلّف مكونات TypeScript Options API باستخدام defineComponent وفعّل الفحص الصارم.
  • أضف أنواعًا صريحة للخصائص المعقدة والأحداث والقيم المحسوبة والخصائص المحقونة.

تجنب

  • استخدام الدوال السهمية كخطافات دورة حياة أو كطرق Options API على المستوى الأعلى.
  • الاعتماد على معاملات أحداث غير مكتوبة واستنتاج واسع لخصائص الكائنات.
  • إنشاء طرق debounce أو throttle مشتركة مباشرة داخل خيار methods.

الأسئلة المتكررة

لماذا تعطل الدوال السهمية ربط this في Options API؟
تحتفظ الدوال السهمية بـ this من النطاق المحيط بها. لا يمكن لـ Vue استبدالها بنسخة المكون.
هل تغطي هذه المهارة Vue 3 Composition API؟
لا. تركز على مكونات Options API، بما في ذلك مشاريع Vue 3 التي لا تزال تستخدم Options API.
متى يجب أن أستخدم defineComponent؟
استخدم defineComponent لمكونات TypeScript Options API. فهو يحسن الاستدلال للخصائص والبيانات والقيم المحسوبة والطرق.
كيف يجب كتابة الخصائص المعقدة؟
عرّف واجهات TypeScript واستخدم Vue PropType للكائنات والمصفوفات والدوال وقيم union.
هل يمكن استخدام الدوال السهمية داخل الطرق؟
نعم. يمكن للاستدعاءات الراجعة السهمية داخل طريقة عادية أن ترث قيمة this الخاصة بالطريقة بأمان.
هل تشغل المهارة أوامر أو تعدل ملفات؟
لا. إنها مهارة توثيق تحتوي على مراجع Markdown ولا تنفذ أوامر.

تفاصيل المطور

المؤلف

github.com/vuejs-ai

الترخيص

MIT

إصدار المؤلف

v2.0.0

مراجعة Skillstore

r1

المستودع

https://github.com/vuejs-ai/skills/tree/main/skills/vue-options-api-best-practices/

مرجع

36e07d5e13068e5be64447e8f20b427cf2cbd21a

حداثة الصيانة

١٨‏/٧‏/٢٠٢٦

الاستخدام

23 تنزيلات · 154 مشاهدات

بنية الملفات

📁 reference/

📄 no-arrow-functions-in-lifecycle-hooks.md

📄 no-arrow-functions-in-methods.md

📄 stateful-methods-lifecycle.md

📄 ts-options-api-arrow-functions-validators.md

📄 ts-options-api-computed-return-types.md

📄 ts-options-api-proptype-complex-types.md

📄 ts-options-api-provide-inject-limitations.md

📄 ts-options-api-type-event-handlers.md

📄 ts-options-api-use-definecomponent.md

📄 ts-strict-mode-options-api.md

📄 SKILL.md

المزيد من github.com/vuejs-ai

مهارات ذات صلة

عرض الكل
📦

playwright-testing

86

تحسين تغطية اختبارات Playwright

بواسطة C0ntr0lledCha0s

يمكن أن تصبح مجموعات اختبارات Playwright غير مستقرة عندما تكون الإعدادات والمحددات وfixtures غير متسقة. تمنحك هذه المهارة أنماطًا عملية لاختبارات متصفح موثوقة، وتصحيح الأخطاء، وكائنات صفحات قابلة لإعادة الاستخدام.

البرمجة والتطوير عرض