المهارات 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 屬性的物件。
  • 依賴項在渲染和 effect 執行期間被追蹤。
  • 當依賴項變更時，effect 會自動重新執行。

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

آمن
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 元件。

元件通訊模式

掌握 props、自訂事件、v-model 綁定和作用域插槽，實現靈活的元件 API。

TypeScript 與 Vue Composition API

使用適當的 TypeScript 註釋和推斷編寫類型安全的 Vue 元件。

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

基本 Vue 元件 
展示如何使用 script setup 和 Composition API 建立基本的 Vue 3 元件。包括使用 ref 的響應式狀態和 computed 屬性。
自訂 v-model 元件 
如何建立支援 v-model 的自訂元件？展示如何處理 modelValue prop 和 update:modelValue emit 事件。
Composable 模式 
解釋 Vue 3 中的 composable 模式。展示如何使用 use 前綴慣例在多個元件之間提取和重用狀態邏輯。
TypeScript 元件 
撰寫具有完整 TypeScript 支援的 Vue 3 元件。包括使用 defineProps 的類型化 props、使用 defineEmits 的類型化 emits，以及 refs 的適當推斷。

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

  • 使用 script setup 語法以獲得更簡潔、更簡短的元件，並獲得更好的 TypeScript 支援
  • 對基本類型使用 ref，對物件使用 reactive - 使用 toRefs() 解構 reactive
  • 對衍生狀態使用 computed 而非方法，以獲得快取的好處

تجنب

  • 避免對基本類型使用 reactive - 請改用 ref
  • 不要在沒有 toRefs() 的情況下解構 reactive 物件 - 你會失去響應式
  • 避免直接修改 props - 發送事件以更新父元件狀態

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

Vue 3 中 ref 和 reactive 有什麼區別？
ref 為任何值類型建立響應式包裝器，在 script 中需要 .value 存取。reactive 為物件建立代理並保持深層響應式。ref 適用於基本類型；reactive 適用於巢狀物件。
如何在 Vue 中的元件之間共用狀態？
選項包括用於父子元件的 props/emits、用於祖先進元件的 provide/inject、用於全域狀態的 Pinia，以及用於可重用狀態邏輯的 composables。
什麼是 Composition API？
Composition API 是一組函數（ref、reactive、computed、watch、生命周期鉤子），允許按功能而非選項物件組織程式碼。它實現了更好的 TypeScript 支援和邏輯重用。
如何在自訂元件上使用 v-model？
接受 modelValue prop 並發送 update:modelValue。對於多個模型，使用 defineModel 或透過 v-model:propName 自訂命名。
Composition API 中有哪些可用的生命周期鉤子？
onMounted、onUpdated、onUnmounted、onBeforeMount、onBeforeUpdate、onBeforeUnmount、onErrorCaptured，以及其他與 Options API 鉤子對應的函數。
如何在 Vue 3 中存取 DOM 元素？
使用帶有 ref() 函數的模板 refs。透過 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