1. The Progressive Framework & Composition API
The Progressive Framework
Vue.js was created by Evan You (a former Google engineer on the Angular team) to solve a specific problem: Angular was too heavy and opinionated, and React's JSX was too disconnected from standard HTML. Vue was designed as the Progressive Framework.
What does 'Progressive' mean? It means Vue can scale to your exact needs. You can drop a single Vue script tag into a legacy HTML file to add a tiny bit of interactivity, or you can use Vue's CLI and build tools to architect a massive, enterprise-grade Single Page Application (SPA). Vue adapts to you.
Options API vs. Composition API
If you look at older Vue 2 tutorials, you will see the Options API. It forced you to organize your code by property type: all your data went into a data() object, all your methods into a methods: {} block, and all your lifecycle hooks into their own blocks. As components grew massive, this became a nightmare because logic for a single feature (like a search bar) was split across 5 different sections of the file.
In Vue 3, the architecture shifted to the Composition API. The Composition API allows you to group code by logical concern rather than by property type. It looks and feels much closer to standard Vanilla JavaScript and React Hooks.
Single-File Components (SFCs)
The crown jewel of Vue architecture is the Single-File Component (.vue file). Unlike React, where HTML, CSS, and JS are all mashed into a single JavaScript function using JSX, Vue strictly separates them into three clean blocks within the same file.
Knowledge Check
Ready to test your understanding of 1. The Progressive Framework & Composition API?