vue

Vue 3 script setup with defineProps and defineEmits simplifies component typing and wiring in TypeScript. You use these compiler macros directly in the <script setup lang="ts"> block to define reactive props and custom events without manual exports.

In the Vue 3 Composition API, ref provides reactive access to primitive values, while reactive wraps objects to track deep property mutations. Both establish reactivity, but refs require .value access in script setup, whereas reactive objects are mutated directly.

Vue 3 defineModel creates a reactive双向 binding variable inside script setup, automatically wiring up props and emits for v-model integration. This eliminates the need to manually define a modelValue prop and an update:modelValue event.

Use Vue 3 built-in components like Teleport for rendering DOM outside the component tree, Suspense for handling async component loading states, and KeepAlive for caching component instances to preserve state across dynamic toggles.

Yes, Vue 3 Composition API lifecycle hooks like onMounted and onUnmounted can be directly called inside the script setup block. They execute synchronously during component initialization to register reactive side effects and cleanup logic.

Vue 3 script setup lacks direct support for inheritance and custom render functions without separate standard script blocks. Complex shared logic requires extraction into composables, as all declared top-level bindings are automatically exposed to the template.