We always have something to tell about Vue. As you probably know, Vue offers stateless functional components, but why would we need to carry the state in a functional component? So, can we use hooks in Vue? Hooks can consume and use state from one to another. This means that if we need chain encapsulated logic, it’s now possible. Let’s take a closer look.
Mainly, Hooks offer a more explicit way to think of reusable patterns — one that avoids rewrites to the components themselves and allows disparate pieces of the stateful logic to seamlessly work together. It was common to use patterns like render props and higher-order components, but we’d find ourselves in similar “pyramid of doom” — style implementation hell where nesting became so heavily over-utilized that components could be difficult to maintain.
Hooks achieve what mixins do, but avoid two main problems that come with mixins:
- They allow us to pass state from one to the other.
- They make it explicit where logic is coming from.
If we’re using more than one mixin, it’s not clear which property was provided by which mixin. With Hooks, the return value of the function documents the value being consumed. In Vue, this means that we can group a data call, a method call, or a computed call into another custom function, and make them freely compose-able. Data, methods, and computed now become available in functional components.
Intrigued? Feel free to read more here.
And as a bonus, you can read an article about 4 things you can do with Vue.js CLI. However, the more you know – the heavier your head becomes.