Vue

uni-helper/skills/skills/vue

作者 uni-helper15909ff061a3無授權條款108 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫7 個月前更新

Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns.

AI 產生的概覽

使用組合式 API、script setup 與 TypeScript 建置 Vue 3.5+ 應用程式的參考指南。

功能
提供 Vue.js 開發主題的結構化參考,包括響應式系統(ref、reactive、computed、watch、watchEffect),元件特性如 props、emits、插槽、v-model 與生命週期鉤子,以及可重複使用模式如組合式函式、自訂指令與範本參照。也涵蓋進階主題,例如 provide/inject 與搭配 Suspense 的非同步元件,以及 TypeScript 用法。文末提供關鍵建議,例如使用帶 lang ts 的 script setup,並優先使用 ref 而非 reactive。
適用情境
在建置或處理 Vue 元件、處理響應式或組合式 API 模式,或查閱 Vue 元件、組合式函式與 TypeScript 慣例時使用。
執行需求
不需要指令碼或執行階段相依套件,僅為說明性參考資料。代理不需要安裝套件、憑證或網路存取。

Vue

The skill is based on Vue 3.5+, generated at 2026-01-28.

Vue is a progressive JavaScript framework for building user interfaces. It builds on standard HTML, CSS, and JavaScript with intuitive API and world-class documentation. The Composition API with <script setup> and TypeScript is the recommended approach for building Vue applications.

Core References

TopicDescriptionReference
Reactivity Systemref, reactive, computed, watch, and watchEffectcore-reactivity [blocked]

Components

TopicDescriptionReference
PropsDeclare and validate component props with TypeScriptcomponents-props [blocked]
Events (Emits)Emit custom events from componentscomponents-emits [blocked]
SlotsPass template content to child componentscomponents-slots [blocked]
v-modelTwo-way binding on custom componentscomponents-v-model [blocked]
Lifecycle HooksRun code at specific component lifecycle stagescomponents-lifecycle [blocked]

Features

Script Setup & TypeScript

TopicDescriptionReference
Script SetupComposition API syntactic sugar for SFCsfeatures-script-setup [blocked]
TypeScriptType-safe Vue components with Composition APIfeatures-typescript [blocked]

Reusability

TopicDescriptionReference
ComposablesEncapsulate and reuse stateful logicfeatures-composables [blocked]
Custom DirectivesLow-level DOM manipulation directivesfeatures-directives [blocked]
Template RefsDirect DOM and component instance accessfeatures-template-refs [blocked]

Advanced

TopicDescriptionReference
Provide/InjectDependency injection across component treeadvanced-provide-inject [blocked]
Async & SuspenseTop-level await pitfalls, async components, Suspenseadvanced-async-suspense [blocked]

Key Recommendations

  • Use <script setup lang="ts"> for all components
  • Prefer ref() over reactive() for declaring state
  • Use type-based prop declarations with interfaces
  • Use defineModel() for v-model (3.4+)
  • Destructure props reactively (3.5+) for cleaner code
  • Extract composables for reusable stateful logic

來源與署名

來源:uni-helper/skills位於skills/vue提交15909ff

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架