Vue

作者 onmax008232b5d7a5無授權條款719 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫2 天前更新

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 單一檔案元件提供參考指引，涵蓋 script setup 巨集（例如 defineProps、defineEmits、defineModel）、響應式系統（ref、shallowRef、computed、監聽器）以及內建元件（Transition、Teleport、Suspense、KeepAlive）。它提出偏好建議，例如使用 TypeScript、script setup 搭配 lang ts，以及優先採用組合式 API 而非選項式 API，並附有元件範本與常用匯入清單。它產出的是撰寫程式的指引，而非檔案或指令碼。
適用情境: 適用於撰寫或審查 Vue 單一檔案元件、定義 props、emits 或 model、處理監聽器與生命週期鉤子，或使用內建元件與指令的情況。對象為 Vue 3.5 及更新版本並採用組合式 API。
執行需求: 不需要指令碼或工具，僅為說明與參考文件。其指引假定使用 Vue 3 專案與 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'

來源與署名

來源：onmax/nuxt-skills位於skills/vue提交008232b

授權條款：無授權條款

內容歸原作者所有。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今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新

Vue

Vue

Preferences

Core

Features

Quick Reference

Component Template

Key Imports

來源與署名

更多來自 onmax/nuxt-skills 的技能

Nuxt Ui

Nuxt Modules

Nuxt I18n

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices