vue

Vue 3 script setup macros like defineProps and defineEmits enable concise component code by automatically exposing reactive properties and events. You declare them directly inside the script setup block to achieve reactive data flow without boilerplate.

You need built-in components like Transition, Teleport, and Suspense in Vue 3 when building rich UI patterns. They manage element animations, portal content outside the DOM hierarchy, and coordinate async component loading states respectively.

The best way to manage Vue 3 reactivity and lifecycle hooks involves using ref, shallowRef, computed, and watchEffect. These functions track dependencies automatically, ensuring robust state management across common lifecycle stages.

Vue 3 defineModel handles two-way binding and works alongside KeepAlive for component state preservation. Custom directives can be applied within the same SFC to create rich UI patterns without conflicting with the model macro.

Vue 3 watchEffect might not trigger with shallowRef because shallowRef only tracks the .value replacement, not deep mutations. You must reassign the entire value or switch to a standard ref to achieve comprehensive reactive dependency tracking.