vue
GitHub提供 Vue 3 Composition API 开发指南，涵盖 script setup、响应式系统及内置组件的最佳实践与快速参考。
Trigger Scenarios
编写 Vue 单文件组件
使用 Vue 3 响应式 API
配置 Vue 生命周期钩子
Install
npx skills add NeverSight/learn-skills.dev --skill vue -g -y
SKILL.md
Frontmatter
{
"name": "vue",
"metadata": {
"author": "Anthony Fu",
"source": "Generated from https:\/\/github.com\/vuejs\/docs, scripts at https:\/\/github.com\/antfu\/skills",
"version": "2026.1.31"
},
"description": "Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps\/defineEmits\/defineModel, watchers, or using Transition\/Teleport\/Suspense\/KeepAlive."
}
Vue
Based on Vue 3.5. Always use Composition API with
<script setup lang="ts">.
Preferences
- Prefer TypeScript over JavaScript
- Prefer
<script setup lang="ts">over<script> - For performance, prefer
shallowRefoverrefif deep reactivity is not needed - Always use Composition API over Options API
- Discourage using Reactive Props Destructure
Core
| Topic | Description | Reference |
|---|---|---|
| Script Setup & Macros | <script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics |
script-setup-macros |
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | core-new-apis |
Features
| Topic | Description | Reference |
|---|---|---|
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | advanced-patterns |
Quick Reference
Component Template
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
const props = defineProps<{
title: string
count?: number
}>()
const emit = defineEmits<{
update: [value: string]
}>()
const model = defineModel<string>()
const doubled = computed(() => (props.count ?? 0) * 2)
watch(() => props.title, (newVal) => {
console.log('Title changed:', newVal)
})
onMounted(() => {
console.log('Component mounted')
})
</script>
<template>
<div>{{ title }} - {{ doubled }}</div>
</template>
Key Imports
// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'
Version History
- e0220ca Current 2026-07-05 20:29
