vue

Vue 技能基于 Vue 3.5，用于指导在前端开发中编写 Vue 组件。

用途 该技能面向使用 Vue 框架进行开发的工作，特别是编写 Vue 单文件组件（SFC）的场景，例如定义组件属性、事件与双向绑定模型。

主要能力 技能内容覆盖以下主题：

1. Script Setup 与宏：包括 <script setup>、defineProps、defineEmits、defineModel、defineExpose、defineOptions、defineSlots 以及泛型（generics），参考条目为 script-setup-macros。

2. 响应式与生命周期：包括 ref、shallowRef、computed、watch、watchEffect、effectScope、生命周期钩子与组合式函数（composables），参考条目为 core-new-apis。

3. 内置组件与指令：包括 Transition、Teleport、Suspense、KeepAlive、v-memo 与自定义指令，参考条目为 advanced-patterns。

偏好设定 文档给出如下开发偏好：

• 优先使用 TypeScript 而非 JavaScript。
• 优先使用 <script setup lang="ts"> 而非 <script>。
• 出于性能考虑，在不需要深层响应式时优先使用 shallowRef 而非 ref。
• 始终使用 Composition API 而非 Options API。
• 不建议使用响应式 Props 解构（Reactive Props Destructure）。

使用方式 文档提供组件模板示例，展示如何在同一组件中组合使用 <script setup lang="ts">、defineProps、defineEmits、defineModel、computed、watch 与 onMounted：

<script setup lang="ts"> import { computed, onMounted, ref, watch } 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>

文档同时给出关键导入速查：

// 响应式 import { computed, reactive, readonly, ref, shallowRef, toRef, toRefs, toValue } from 'vue' // 侦听器 import { onWatcherCleanup, watch, watchEffect, watchPostEffect } from 'vue' // 生命周期 import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from 'vue' // 工具 import { defineAsyncComponent, defineComponent, nextTick } from 'vue'

适用场景 适用于编写 Vue 单文件组件、使用 defineProps/defineEmits/defineModel 等宏、以及需要使用 Vue 响应式系统、生命周期钩子、内置组件与自定义指令的开发工作。

限制 资料未提供关于该技能的安装方式、版本兼容范围、收费情况或价格等信息，暂未提供。