Vue 3 what is the class-Based API, function-based API, Reactivity API and composition API

Question

When I started working with vue 3, I saw these notions :

• Object-based API
• Function-based API
• Class-Based API
• Composition API
• Options API
• Reactivity API

Can some one tell us the definitions of these?

Update 2021

I added Options API and Reactivity API

Answer 1

Note that the main docs mention Options-based, and not Object-based, but even in references by Evan, they seem to be interchangeable.

Option-based API is Class-based and Function-based API is Composition API.

Option-based vs Function-based express, what I would call, the theoretical model of how to differentiate the APIs. Whereas Class-based vs Composition differentiate between the implementation.

Options-based/Class-based API

You have the old way used by vue1 and vue2, called class-based, which is referred to as Option-based API.

The naming implies that the component is defined by options. You may think of the options as data, computed, methods etc... They define how a component works by using a set of pre-defined options that you overload.

The downside of this way of defining functionality is that you have the actual component logic distributed between various "options", which makes it harder to understand from the code what the component actually does.

Function-based/Composition API

Function implies that we're declaring functionality of the component (not that it's using functional components). The Composition API makes the code easier to reuse (since you don't need to tightly-couple aspects of functionality to a component) and easier to read and maintain (since you can encapsulate functionality in smaller, dedicated units)