There are non-reactive variables that we use in the template. For example, a title variable will never change. So it doesn’t need to be reactive. However order to use it in the template, we need to define it in data, methods or computed. Therefore, we give reactivity to a variable that doesn’t need to be reactive. Considering that there is a lot of data like this, it will put a huge load on our application.
With the increase of codes in options api over time, even reading the codes becomes difficult. This is because options api forces us to use reactive variables, methods, computed etc in one place.
Inside the setup hook, we can group parts of our code by logical concern. We then can extract pieces of reactive logic and share the code with other components. So composition api allows us to write more organized code.
It is best to prefer composition api. So how do they look?
