The right perspective for working with script-setup
summary
Explains that script setup is a compiler-only syntax that hoists imports, inlines the render into the setup closure, and produces no extra runtime or bundle cost while giving a small re-render performance win. Shows concrete compiler helpers: defineProps and defineEmits map to the usual options, defineExpose makes internal refs available (demo toggles a ref visible to the parent), and the experimental reactivity transform ($-prefixed refs) removes explicit ref imports but has behavioral and adoption caveats; available in Vue 3 and backported to Vue 2.7.
AI-written summary · about
chapters (10)
- 0:00Introduction and background
- 2:13Options API vs Composition API
- 5:26What is script-setup
- 7:13Under the hood of script-setup
- 10:03Compiler hints for props and emits
- 12:52Exposing component state
- 17:08Additional script block use cases
- 20:48Type-based props and events
- 25:02Reactivity transform
- 27:28Summary and key takeaways
