用途
该技能用于辅助 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 官方文档,本技能仅作为开发过程中的规范与速查参考。