vue

Vue 3 script setup uses compiler macros like defineProps, defineEmits, defineModel, and defineExpose to build concise, typed components. You apply these directly inside the <script setup> block to structure props and reactive state without manual exports.

Migrating from Options API to Composition API involves restructuring components using ref, reactive, computed, and watch. You incrementally replace data and methods with reactive variables and functions, leveraging lifecycle hooks within script setup for maintainable, scalable UIs.

Vue 3 built-in components like Transition, Teleport, and Suspense manage complex UI states. Transition handles enter and leave animations, Teleport renders DOM nodes outside the component tree, and Suspense coordinates async component loading for polished user experiences.

KeepAlive caches component instances to preserve state and avoid re-rendering, while v-memo skips re-rendering elements unless dependencies change. You apply these built-in features in Vue 3 to optimize rendering performance for dynamic views.

TypeScript is not required to use compiler macros like defineProps and defineEmits in Vue 3. You can apply script setup in plain JavaScript, but adding lang="ts" enables type inference for strongly typed component props and emitted events.

You should avoid Vue 3 Composition API when migrating large legacy codebases heavily reliant on Options API patterns without dedicated refactoring time. If your project lacks strict component structure requirements, the added reactivity complexity might not justify the migration.