Options API in Vue.js

Options API is the sixth chapter of the free Vue.js tutorial. It teaches you to read and change the older component style you will meet in many existing projects.

What each lesson covers:

• Options API: data(), methods, computed, watch, this and $watch, Options lifecycle hooks, defineComponent() for TypeScript, mixins and their limits, and a side-by-side table with the Composition API.

Many Vue 2 projects, and plenty of Vue 3 ones, still use this style, so you will meet it at work. The lesson shows state in data(), functions in methods, derived values in computed and side effects in watch, all reached through this. It then maps each lifecycle hook to its Composition API twin, adds types with defineComponent(), and explains why mixins were replaced by composables. The last section puts the same component in both styles side by side, so you can read either one and move code from one to the other.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

1. Options API

   When you will meet the Options API, data(), methods, computed and watch, this and $watch, lifecycle hooks in Options style, defineComponent() for TypeScript, mixins with their merging rules and limits, composables as the modern fix, and a side-by-side table of both styles.

   • Read and write components with data, methods, computed and watch
   • Use this correctly and know the Options lifecycle hooks
   • Type Options API components with defineComponent()
   • Explain how mixins work and why composables replaced them