SuperAPI AI 工具集

vue

前端与建站

查看项目

更新于 10-16 15:02

技能介绍

用途

该技能用于辅助 Vue 3 单文件组件(SFC)的开发,定位为编写 Vue 组件时的参考与规范集合。它基于 Vue 3.5,明确规定始终使用 Composition API 与 <script setup lang="ts">。

主要能力

资料按主题组织为几个部分:

  • 核心(Core):包括 Script Setup 与宏(<script setup>、defineProps、defineEmits、defineModel、defineExpose、defineOptions、defineSlots、泛型),以及响应式与生命周期(ref、shallowRef、computed、watch、watchEffect、effectScope、生命周期钩子、组合式函数)。
  • 特性(Features):内置组件与指令,涵盖 Transition、Teleport、Suspense、KeepAlive、v-memo 和自定义指令。

偏好约定

资料给出的偏好包括:优先 TypeScript 而非 JavaScript;优先 <script setup lang="ts"> 而非 <script>;若不需要深层响应式,出于性能考虑优先使用 shallowRef 而非 ref;始终使用 Composition API 而非 Options API;不鼓励使用 Reactive Props Destructure。

使用方式

资料提供了一份组件模板与关键导入清单:

组件模板示例使用 defineProps 定义 title 与可选的 count,使用 defineEmits 定义 update 事件,使用 defineModel<string>() 定义双向绑定模型,并通过 computed、watch、onMounted 组合逻辑,模板中渲染 {{ title }} - {{ doubled }}。

关键导入分为三类:响应式(ref、shallowRef、computed、reactive、readonly、toRef、toRefs、toValue);侦听器(watch、watchEffect、watchPostEffect、onWatcherCleanup);生命周期(onMounted、onUpdated、onUnmounted、onBeforeMount、onBeforeUpdate、onBeforeUnmount);以及工具函数(nextTick、defineComponent、defineAsyncComponent)。

适用场景

适用于需要编写或审查 Vue SFC、处理组件 props/emits/双向绑定、组织响应式状态与副作用、选择内置组件或自定义指令等场景。

限制

资料未提供安装步骤、版本依赖要求、平台信息、收费情况或效果说明;上述内容均暂未提供。具体 API 行为应参考 Vue 官方文档,本技能仅作为开发过程中的规范与速查参考。