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今天更新

Dpop Adoption

google

精選

指導為 Google OAuth 平台實作 OAuth 2.0 DPoP（RFC 9449）傳送方約束的更新權杖。

Software Development21K今天更新

Gemini Live Api

google

精選

產生 Gemini Live API WebSocket 用戶端類別、測試、文件，以及用於雙向串流的示範介面。

Software Development21K今天更新

Gemini Api

google

精選

說明如何在 Google Agent Platform 上使用 Gen AI SDK 呼叫 Gemini API，涵蓋多種語言與多項功能。

Software Development21K今天更新