Vue
Based on Vue 3.5. Always use Composition API with <script setup lang="ts">.
Preferences
- Prefer TypeScript over JavaScript
- Prefer
<script setup lang="ts"> over <script>
- For performance, prefer
shallowRef over ref if deep reactivity is not needed
- Always use Composition API over Options API
- Discourage using Reactive Props Destructure
Core
| Topic |
Description |
Reference |
| Script Setup & Macros |
<script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics |
script-setup-macros |
| Reactivity & Lifecycle |
ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables |
core-new-apis |
Features
| Topic |
Description |
Reference |
| Built-in Components & Directives |
Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives |
advanced-patterns |
Quick Reference
Component Template
<script setup lang="ts">
import { ref, computed, watch, onMounted } 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>
Key Imports
// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'
1---2name: vue3description: Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.4---5# Vue67> Based on Vue 3.5. Always use Composition API with `<script setup lang="ts">`.89## Preferences1011- Prefer TypeScript over JavaScript12- Prefer `<script setup lang="ts">` over `<script>`13- For performance, prefer `shallowRef` over `ref` if deep reactivity is not needed14- Always use Composition API over Options API15- Discourage using Reactive Props Destructure1617## Core1819| Topic | Description | Reference |20|-------|-------------|-----------|21| Script Setup & Macros | `<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | [script-setup-macros](references/script-setup-macros.md) |22| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) |2324## Features2526| Topic | Description | Reference |27|-------|-------------|-----------|28| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |2930## Quick Reference3132### Component Template3334```vue35<script setup lang="ts">36import { ref, computed, watch, onMounted } from 'vue'3738const props = defineProps<{39 title: string40 count?: number41}>()4243const emit = defineEmits<{44 update: [value: string]45}>()4647const model = defineModel<string>()4849const doubled = computed(() => (props.count ?? 0) * 2)5051watch(() => props.title, (newVal) => {52 console.log('Title changed:', newVal)53})5455onMounted(() => {56 console.log('Component mounted')57})58</script>5960<template>61 <div>{{ title }} - {{ doubled }}</div>62</template>63```6465### Key Imports6667```ts68// Reactivity69import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'7071// Watchers72import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'7374// Lifecycle75import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'7677// Utilities78import { nextTick, defineComponent, defineAsyncComponent } from 'vue'79```
pleaseai