SuperAPI AI 工具集

vue

前端与建站

查看项目

更新于 10-16 14:51

技能介绍

Vue 是一份围绕 Vue 3.5 的编码技能资料,用于指导开发者以 Composition API 编写 Vue 单文件组件(SFC)。

用途 该资料面向编写 Vue SFC 的场景,重点涉及 defineProps、defineEmits、defineModel 等宏的使用。它强调以 Vue 3.5 为基准,并给出若干明确的编码偏好,用于统一团队或个人的 Vue 组件写法。

主要偏好 资料明确列出以下偏好:

  • 优先使用 TypeScript 而非 JavaScript。
  • 优先使用 <script setup lang="ts"> 而非普通 <script>。
  • 出于性能考虑,若不需要深层响应式,优先使用 shallowRef 而非 ref。
  • 始终使用 Composition API 而非 Options API。
  • 不鼓励使用 Reactive Props Destructure。

核心内容 资料将核心知识分为两类主题,并分别对应参考文档:

  1. Script Setup 与宏:涵盖 <script setup>、defineProps、defineEmits、defineModel、defineExpose、defineOptions、defineSlots 以及泛型,参考 script-setup-macros。
  2. 响应式与生命周期:涵盖 ref、shallowRef、computed、watch、watchEffect、effectScope、生命周期钩子与组合式函数(composables),参考 core-new-apis。

特性内容 资料另列出内置组件与指令,包括 Transition、Teleport、Suspense、KeepAlive、v-memo 以及自定义指令,参考 advanced-patterns。

使用方式与示例 资料提供一个组件模板示例,展示如何从 vue 导入 ref、computed、watch、onMounted,并组合使用 defineProps、defineEmits、defineModel、computed、watch 与 onMounted。示例中 defineProps 声明 title 与可选 count,defineEmits 声明 update 事件,defineModel 声明字符串模型,computed 基于 props.count 计算 doubled,watch 监听 props.title,onMounted 输出挂载信息;模板中渲染 title 与 doubled。 资料还给出常用导入清单,分为三类:

  • Reactivity:ref、shallowRef、computed、reactive、readonly、toRef、toRefs、toValue。
  • Watchers:watch、watchEffect、watchPostEffect、onWatcherCleanup。
  • Lifecycle:onMounted、onUpdated、onUnmounted、onBeforeMount、onBeforeUpdate、onBeforeUnmount。
  • Utilities:nextTick、defineComponent、defineAsyncComponent。

适用场景 适用于需要以 Vue 3.5 与 Composition API 编写组件的开发场景,尤其适合希望统一使用 TypeScript、<script setup> 与宏语法,并关注响应式性能取舍的项目。

限制 资料未提供 Star 数、维护状态、版本更新频率、许可协议、收费与价格、平台支持范围以及与其他工具的集成方式等信息,这些内容暂未提供。