Vue

# Vue

基于 Vue 3.5。始终使用 Composition API 与 `<script setup>` 语法糖。

## 偏好规范

- 优先使用 TypeScript，而非 JavaScript
- 优先使用 `<script setup>`，而非 Options API 或普通 `<script>`
- 性能敏感场景下，若无需深层响应式，优先选用 `shallowRef` 而非 `ref`
- 始终采用 Composition API，禁用 Options API
- 禁止对 `props` 进行解构赋值（会丢失响应性）

## 核心能力

| 主题 | 说明 | 参考 |
|------|------|------|
| `<script setup>` 与宏 | `defineProps`, `defineEmits`, `defineModel`, `defineExpose`, `defineOptions`, `defineSlots`, 泛型支持 | [script-setup-macros](https://github.com/antfu/skills/blob/HEAD/skills/vue/references/script-setup-macros.md) |
| 响应式与生命周期 | `ref`, `shallowRef`, `computed`, `watch`, `watchEffect`, `effectScope`, 生命周期钩子，可组合函数（composables） | [core-new-apis](https://github.com/antfu/skills/blob/HEAD/skills/vue/references/core-new-apis.md) |

## 特性支持

| 主题 | 说明 | 参考 |
|------|------|------|
| 内置组件与指令 | `Transition`, `Teleport`, `Suspense`, `KeepAlive`, `v-memo`，自定义指令 | [advanced-patterns](https://github.com/antfu/skills/blob/HEAD/skills/vue/references/advanced-patterns.md) |

## 快速参考

### 组件模板示例

```vue
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps<{ count?: number; title: string }>()
const emit = defineEmits<{ (e: 'update:title', value: string): void }>()
const model = defineModel<{ value: string }>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {
  console.log('Title changed:', newVal)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <h1>{{ props.title }} - {{ doubled }}</h1>
</template>
```

### 常用导入清单

```ts
// 响应式
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// 观察器
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// 生命周期
import {
  onMounted,
  onUpdated,
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount
} from 'vue'

// 工具函数
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'
```