المهارات vue
📦

vue

آمن ⚡ يحتوي على سكربتات🌐 الوصول إلى الشبكة

Vue.jsコンポーネントの構築

Vue.jsアプリケーションの構築には、反応的な状態管理、コンポーネントの構成、そして現代的なJavaScriptパターンの理解が必要です。このスキルは、Vue Composition API、コンポーネント設計、および反応性の基礎に関する専門的なガイダンスを提供します。

يدعم: Claude Codex Code(CC)
🥉 72 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "vue". How do I use ref vs reactive in Vue 3?

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

  • プリミティブ値や値全体を置き換える場合はrefを使用してください。
  • オブジェクトで深い反応性が必要な場合はreactiveを使用してください。
  • refはscript内では.valueアクセスが必要ですが、テンプレート内では必要ありません。
  • reactiveはtoRefs()なしで分割代入すると反応性を失います。

استخدام "vue". When should I use slots in Vue components?

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

  • 子コンポーネントにテンプレートコンテンツを渡したい場合はスロットを使用してください。
  • 名前付きスロットにより、v-slotディレクティブで複数の挿入ポイントが有効になります。
  • スコープ付きスロットにより、子コンポーネントがスロットコンテンツにデータを渡せます。
  • スロットコンテンツが提供されていない場合、フォールバックコンテンツが表示されます。

استخدام "vue". How does Vue reactivity work under the hood?

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

  • Vueはreactive()にProxyベースの反応性を使用しています。
  • refはプライベートvalueプロパティを持つオブジェクトを使用します。
  • 依存関係はレンダリングとエフェクト実行中に追跡されます。
  • 依存関係が変更されると、エフェクトは自動的に再実行されます。

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

آمن
v1 • 1/30/2026

Documentation-only skill containing Vue.js reference materials. All 493 flagged patterns are in markdown documentation files and represent code examples, not executable code. No actual security risks identified. Safe for publication.

15
الملفات التي تم فحصها
2,937
الأسطر التي تم تحليلها
3
النتائج
1
إجمالي عمليات التدقيق
مشكلات متوسطة المخاطر (1)
references/core-reactivity.md:12references/core-reactivity.md:239-263references/features-typescript.md:14-257SKILL.md:14-61
Documentation Pattern False Positives
All 'external_commands', 'scripts', and 'network' patterns are in markdown documentation files. These represent code examples in documentation, not executable code. The static scanner cannot distinguish documentation examples from actual code. No security risk exists.

عوامل الخطر

⚡ يحتوي على سكربتات (1)
references/advanced-async-suspense.md:68-73
🌐 الوصول إلى الشبكة (3)
SKILL.md:7 references/core-reactivity.md:239-288 references/features-typescript.md:249-273
تم تدقيقه بواسطة: claude

درجة الجودة

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

ماذا يمكنك بناءه

反応的なコンポーネントの構築

ref、reactive、computedプロパティを使用して反応的な状態を持つVueコンポーネントの作成方法を学びます。

コンポーネント通信パターン

柔軟なコンポーネントAPIのために、props、カスタムイベント、v-modelバインディング、スコープ付きスロットを習得します。

Vue Composition APIでのTypeScript

適切なTypeScript注釈と推論を使用して型安全なVueコンポーネントを作成します。

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

基本的なVueコンポーネント 
script setupを使用したVue 3の基本的なコンポーネントの作成方法を教えてください。refを使用した反応的な状態とcomputedプロパティを含めてください。
カスタムv-modelコンポーネント 
v-modelをサポートするカスタムコンポーネントの作成方法を教えてください。modelValueプロパティとupdate:modelValue emitイベントの処理方法を教えてください。
コンポーザブルパターン 
Vue 3のコンポーザブルパターンについて説明してください。useプレフィックス規則を使用して、複数のコンポーネント間でステートフルロジックを抽出して再利用する方法を教えてください。
TypeScriptコンポーネント 
完全なTypeScriptサポートを持つVue 3コンポーネントを作成してください。definePropsによる型付きprops、defineEmitsによる型付きemits、refの適切な推論を含めてください。

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

  • よりクリーンで簡潔なコンポーネントとより良いTypeScriptサポートのために、script setup構文を使用する
  • プリミティブにはrefを使用し、オブジェクトにはreactiveを使用する - reactiveはtoRefs()で分割代入する
  • キャッシュの利点を活用するために、算出状態にはcomputedをmethodsの代わりに使用する

تجنب

  • プリミティブでのreactiveの使用を避ける - 代わりにrefを使用する
  • toRefs()なしでreactiveオブジェクトを分割代入しない - 反応性が失われる
  • propsの直接的な変更を避ける - 親の状態を更新するためにイベントを発行する

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

Vue 3でrefとreactiveの違いは何ですか？
refはあらゆる値タイプの反応的なラッパーを作成し、script内で.valueアクセスが必要です。reactiveはオブジェクトのプロキシを作成し、深い反応性を維持します。プリミティブにはrefが推奨され、オブジェクトにはreactiveが使用されます。
Vueでコンポーネント間で状態を共有するにはどうすればよいですか？
オプションには、親子間のprops/emits、祖先と子孫間のprovide/inject、グローバルのStateにはPinia、再利用可能なステートフルロジックにはコンポーザブルがあります。
Composition APIとは何ですか？
Composition APIは、コードが特徴ごとにオプションオブジェクトではなく整理できる関数群（ref、reactive、computed、watch、ライフサイクルフック）です。これにより、より良いTypeScriptサポートとロジックの再利用が可能になります。
カスタムコンポーネントでv-modelを使用するにはどうすればよいですか？
modelValueプロパティを受け取り、update:modelValueを発行します。複数のモデルの場合は、defineModelを使用するか、v-model:propNameでカスタム命名を使用します。
Composition APIで利用できるライフサイクルフックは何ですか？
onMounted、onUpdated、onUnmounted、onBeforeMount、onBeforeUpdate、onBeforeUnmount、onErrorCapturedなど、Options APIフックに一致するその他のフックがあります。
Vue 3でDOM要素にアクセスするにはどうすればよいですか？
ref()関数でテンプレートrefを使用します。ref属性でrefを要素に割り当てます。コンポーネントのマウント後、ref.valueを通じて要素にアクセスします。

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

المؤلف

antfu

الترخيص

MIT

المستودع

https://github.com/antfu/skills/tree/main/skills/vue/

مرجع

main

بنية الملفات

📁 references/

📄 advanced-async-suspense.md

📄 advanced-provide-inject.md

📄 components-emits.md

📄 components-lifecycle.md

📄 components-props.md

📄 components-slots.md

📄 components-v-model.md

📄 core-reactivity.md

📄 features-composables.md

📄 features-directives.md

📄 features-script-setup.md

📄 features-template-refs.md

📄 features-typescript.md

📄 GENERATION.md

📄 SKILL.md