name: vue
description: Vue 3 组合式 API，脚本设置宏，响应式系统和内置组件。用于编写 Vue 单文件组件，defineProps/defineEmits/defineModel，监视器，或使用 Transition/Teleport/Suspense/KeepAlive。
metadata:
author: Anthony Fu
version: “2026.1.31”
source: 生成自 https://github.com/vuejs/docs，脚本在 https://github.com/antfu/skills
Vue
基于 Vue 3.5。始终使用组合式 API 和 <script setup lang=“ts”>。
偏好
- 优先使用 TypeScript 而不是 JavaScript
- 优先使用 <script setup lang=“ts”> 而不是 <script>
- 为性能考虑，如果不需要深度响应式，优先使用 shallowRef 而不是 ref
- 始终使用组合式 API 而不是选项式 API
- 不鼓励使用响应式 Props 解构
核心
| 主题 |
描述 |
参考 |
| 脚本设置与宏 |
<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'