🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install antfu/skills/vue

💡 提示：需要 Node.js 和 NPM

Vue

基于 Vue 3.5。始终使用组合式 API 和 <script setup lang="ts">。

偏好设置

  • 优先使用 TypeScript 而非 JavaScript
  • 优先使用 <script setup lang="ts"> 而非 <script>
  • 为提升性能，如果不需要深度响应式，优先使用 shallowRef 而非 ref
  • 始终使用组合式 API 而非选项式 API
  • 不鼓励使用响应式 Props 解构

核心

主题 描述 参考
Script Setup 与宏 <script setup>、defineProps、defineEmits、defineModel、defineExpose、defineOptions、defineSlots、泛型 script-setup-macros
响应式与生命周期 ref、shallowRef、computed、watch、watchEffect、effectScope、生命周期钩子、组合式函数 core-new-apis

特性

主题 描述 参考
内置组件与指令 Transition、Teleport、Suspense、KeepAlive、v-memo、自定义指令 advanced-patterns

快速参考

组件模板

<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('标题已更改：', newVal)
})

onMounted(() => {
  console.log('组件已挂载')
})
</script>

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>

关键导入

// 响应式
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// 侦听器
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// 生命周期
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// 工具函数
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

📄 原始文档

完整文档（英文）：

https://skills.sh/antfu/skills/vue

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。