SuperAPI AI 工具集

vue

前端与建站

查看项目

更新于 10-16 15:15

技能介绍

本条目是一份关于 Vue 的使用规范或技能文档,内容以 Vue 3.5 为基准,面向使用 Vue 单文件组件(SFC)的开发场景。它并非 Vue 框架本身的介绍,而是归纳了作者推荐的编写偏好与常用参考项。

用途方面,该文档用于指导在 Vue 项目中如何组织组件代码,特别是编写 SFC 时采用何种语法与 API。它强调统一风格,减少在组合式 API 与选项式 API 之间的混用。

主要能力或内容方面,文档给出了若干偏好设定:优先使用 TypeScript 而非 JavaScript;优先使用 <script setup lang="ts"> 而非普通 <script>;若不需要深层响应式,出于性能考虑优先使用 shallowRef 而非 ref;始终使用组合式 API 而非选项式 API;并明确不鼓励使用响应式 Props 解构(Reactive Props Destructure)。

文档将核心内容分为若干主题并附参考索引。核心部分包括:脚本设置与宏(<script setup>、defineProps、defineEmits、defineModel、defineExpose、defineOptions、defineSlots、泛型),引用名为 script-setup-macros;响应式与生命周期(ref、shallowRef、computed、watch、watchEffect、effectScope、生命周期钩子、可组合函数),引用名为 core-new-apis。特性部分为内置组件与指令(Transition、Teleport、Suspense、KeepAlive、v-memo、自定义指令),引用名为 advanced-patterns。

使用方式方面,文档提供了一个快速参考的组件模板示例,展示在 <script setup lang="ts"> 中如何导入 computed、onMounted、ref、watch,如何用 defineProps 定义带类型的 props、用 defineEmits 定义事件(示例中事件 update 携带 string 类型参数)、用 defineModel 定义模型,以及如何使用 computed、watch、onMounted,并在模板中渲染 title 与 doubled。示例中的组件模板使用了 div 标签展示数据。此外还列出了关键导入清单,按响应式、侦听器、生命周期、工具分类给出从 vue 导入的具体名称,例如响应式包括 computed, reactive, readonly, ref, shallowRef, toRef, toRefs, toValue;侦听器包括 onWatcherCleanup, watch, watchEffect, watchPostEffect;生命周期包括 onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated;工具包括 defineAsyncComponent, defineComponent, nextTick。

适用场景方面,该文档适合正在使用 Vue 3.5 及单文件组件的开发者,在编写组件、定义 props/emits/model、使用响应式 API 和生命周期、以及使用内置组件与指令时作为速查与风格约定参考。

限制方面,资料未提供该文档所对应产品、服务或工具的独立发行形态、可安装方式、收费模式、平台支持范围或实际效果说明;也未提供官网、安装命令或代码仓库地址。其来源标识为 alexanderop/nuxt-sync-engine,URL 为 https://www.skills.sh/alexanderop/nuxt-sync-engine/vue,除此之外的补充信息暂未提供。