vue ยท diff
v2026.1.31 to v2026.1.31
68 added, 14 removed. Audit A to B.
---
name: vue
- description: Provides Vue 3.3+ new APIs and patterns including defineModel, reactive props destructure, useTemplateRef, defineOptions, defineSlots, and generic components. Use when implementing v-model on components, working with Vue 3.4+ or 3.5+ features, or debugging async setup issues.
+ description: 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.
metadata:
author: Anthony Fu
version: "2026.1.31"
- source: Generated from https://github.com/vuejs/docs, scripts located at https://github.com/antfu/skills
+ source: Generated from https://github.com/vuejs/docs, scripts at https://github.com/antfu/skills
---
# Vue
- > Based on Vue 3.5+, generated 2026-01-31.
+ > Based on Vue 3.5. Always use Composition API with `<script setup lang="ts">`.
- ## References
+ ## 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 |
|-------|-------------|-----------|
- | New Core APIs | defineModel, reactive destructure, useTemplateRef, onWatcherCleanup, pause/resume | [core-new-apis](references/core-new-apis.md) |
- | Script Setup Macros | defineOptions, defineSlots, named tuple emits, generic components | [script-setup-macros](references/script-setup-macros.md) |
- | Advanced Patterns | Async setup pitfalls, InjectionKey typing | [advanced-patterns](references/advanced-patterns.md) |
+ | Script Setup & Macros | `<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | [script-setup-macros](references/script-setup-macros.md) |
+ | Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) |
+ ## Features
+
+ | Topic | Description | Reference |
+ |-------|-------------|-----------|
+ | Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |
+
## Quick Reference
- - `defineModel<T>()` - v-model on components (3.4+)
- - `const { prop = default } = defineProps<Props>()` - reactive destructure (3.5+)
- - `useTemplateRef<T>('name')` - type-safe template refs (3.5+)
- - `onWatcherCleanup(() => {})` - cleanup in watchers (3.5+)
- - `defineOptions({ inheritAttrs: false })` - component options (3.3+)
- - `defineSlots<{ slot(props): any }>()` - typed slots (3.3+)
- - `generic="T"` attribute on script setup - generic components (3.3+)
+ ### Component Template
+
+ ```vue
+ <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
+
+ ```ts
+ // 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'
+ ```