Vue

作者 antfue53a142a2420无许可证5.9K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库8天前更新

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.

仅含说明Software Development

AI 生成的概览

提供使用组合式 API、script setup 宏、响应式系统和内置组件编写 Vue 3 组件的参考指导。

功能: 提供基于 Vue 3.5 的参考内容，涵盖组合式 API、defineProps、defineEmits、defineModel 等 script setup 宏、响应式系统、侦听器、生命周期钩子以及内置组件。内容包括偏好规则、组件模板、常用导入清单，以及随附的宏、核心 API 和高级模式参考文档。产出为文字指导与代码示例，而非生成文件。
适用场景: 适用于编写或审查 Vue 单文件组件，尤其是使用 script setup 与 TypeScript 的场景。也适用于处理 defineProps、defineEmits、defineModel、侦听器，或 Transition、Teleport、Suspense 与 KeepAlive 时。
运行要求: 不含脚本，仅为说明文档与参考 Markdown 文件。代理无需安装包、凭据或网络访问，但内容面向 Vue 3.5 与 TypeScript 项目。

Vue

Based on Vue 3.5, generated at 2026-09-25. 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 [blocked]
Reactivity & Lifecycle	ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables	core-new-apis [blocked]

Features

Quick Reference

Component Template

vue

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

<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

// Reactivityimport { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
// Watchersimport { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
// Lifecycleimport { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
// Utilitiesimport { nextTick, defineComponent, defineAsyncComponent } from 'vue'

// Reactivityimport { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
// Watchersimport { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
// Lifecycleimport { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
// Utilitiesimport { nextTick, defineComponent, defineAsyncComponent } from 'vue'

来源与署名

来源：antfu/skills位于skills/vue提交e53a142

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Testing Strategy

anthropics

精选

设计测试策略与测试计划，涵盖测试类型、覆盖率目标与示例测试用例。

Software Development27K今天更新

Tech Debt

anthropics

精选

识别、分类并排序技术债务，产出评分后的待办清单与分阶段整改计划。

Software Development27K今天更新

System Design

anthropics

精选

通过需求、高层设计、深入设计、扩展与权衡分析来指导系统与架构设计。

Software Development27K今天更新