Vue Development Composition API vs Options API

on YouTube ↗19m

" summary

Compares Vue Options API versus Composition API by converting a concrete counter component and a useMouse composable from object-based data/methods/computed/watch into script setup using ref, reactive, computed, watch and DefineProps; shows a live counter, an API-querying watcher and a mouse-position hook that all run in the demo. Claims composition produces less code, easier modularization and reuse, while migrating older Vue 2 Options code to Vue 3 can require a full frontend rewrite. counter demo works VueUse ~200 utilities

AI-written summary · about

" chapters (6)

1. 0:00Introduction to Vue.js
2. 1:55The Options API
3. 6:52Pros and cons of Options API
4. 8:39The Composition API
5. 12:28Transitioning to composition
6. 14:12Composition API benefits

" related talks

• 21mVue 3 and Composition APIAlex Kyriakidis · ReactiveConf 2019
• 47mVue’s Composition API: Why it’s ImportantShawn Wildermuth · Connect.Tech 2021
• 31mIntroduction to Vue 3's Composition APIBen Hong · Vuejs Amsterdam 2021
• 32mScalable Front End Architecture with the Composition API and Composable FunctionsWill Marple · Vue.js Nation 2023
• 28mComposition API: a Quick overVueNatalia Tepluhina · JSNation Live 2020
• 22mOptions API vs Composition API: Choosing the Right Approach for Your TeamBen Hong · Vue.js London Live 2021
• 36mVue 3 | Looking into the Vueture: Composition FunctionsNatalia Tepluhina · ComponentsConf 2019
• 27mIntroduction into the Composition APIGregg Pollack · Vue.js Amsterdam 2020