Vue 3.5 最佳实践指南：Composition API、TypeScript 与性能优化技巧

vue by antfu/skills

11,700 周安装量

4,300 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/antfu/skills --skill vue

开发

🇨🇳中文介绍

Vue

基于 Vue 3.5。始终使用 Composition API 配合 <script setup lang="ts">。

偏好设置

优先使用 TypeScript 而非 JavaScript
优先使用 <script setup lang="ts"> 而非 <script>
出于性能考虑，如果不需要深度响应性，优先使用 shallowRef 而非 ref
始终使用 Composition API 而非 Options API
不建议使用响应式 Props 解构

核心

主题	描述	参考链接
Script Setup 与宏	`<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

685,800 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

240,900 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

193,000 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

125,300 周安装

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

主题	描述	参考链接
内置组件与指令	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('Title changed:', newVal)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

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

// 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'

🇺🇸English

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 shallowRef over ref if 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'

Weekly Installs

7.9K

Repository

antfu/skills

GitHub Stars

4.0K

First Seen

Jan 28, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode6.1K

codex5.9K

gemini-cli5.8K

github-copilot5.6K

cursor5.1K

kimi-cli4.9K