Functional Components in Vue.js

Functional Components in Vue.js

• 1.
  Functional Components inVue.js
• 2.
  What is a functional component?
• 3.
  Functional components (notto be confused with Vue’s render functions) is a component which holds no state and no instance. In more plain English, this means that the component does not support reactivity and cannot make a reference to itself through the `this` keyword.
• 4.
  Implementation: <template>
• 5.
  Implementation: render()
• 6.
  Without the stateor instance, you might wonder how you can reference things like data or methods. Fortunately, Vue provides a “context” parameter to the underlying render function. This “context” argument is an object with the following properties: ● props: An object of the provided props ● children: An array of the VNode children ● slots: A function returning a slots object ● scopedSlots: (v2.6.0+) An object that exposes passed-in scoped slots. Also exposes normal slots as functions. ● data: The entire data object, passed to the component as the 2nd argument of createElement ● parent: A reference to the parent component ● listeners: (v2.3.0+) An object containing parent-registered event listeners. This is an alias to data.on ● injections: (v2.3.0+) if using the inject option, this will contain resolved injections.
• 7.
  Accessing this “context”parameter is pretty straightforward. For example, if we wanted to do something with props, it might looks like this:
• 8.
  Implementation: <template>
• 9.
  Implementation: render()
• 10.
  Why are functional components cool?
• 11.
  Functional components canmake accessing your components a little more difficult to work with or introduce some complexity, so why go through the hassle? Speed. Because functional components do not have a state, they do not require extra initialization for things like Vue’s reactivity system. Functional component will still react to changes like new props being passed in, but within the component itself, there is no way for it to know when it’s data has changed because it does not maintain its own state. For a large application, you will see significant improvements to the DOM render/update events after implementing functional components.
• 12.
  When would you usefunctional components?
• 13.
  Functional components areprobably not right for most cases. After all, the point of using a JavaScript framework is to build applications which are more reactive. In Vue, you cannot do this without the reactivity system in place.
• 14.
  There are, however,some excellent use cases to sprinkle in functional components: ● A component which is simply presentational. AKA, a “dumb” component. For example: buttons, pills, tags, cards, even full pages with just static text like an About page. ● A “higher order component” which is used to wrap markup or basic functionality around another component. ● Any time you find yourself in a loop (v-for), the items in the loop are usually great candidates.
• 15.
  Caveats
• 16.
  There is onesmall issue I’ve run into for a pretty specific use case. When using a <template> tag, and accepting data through a prop, sometimes we want to modify the data inside the template. With a standard Vue component, this is easy using either methods, or computed props. With functional components, we do not have access to methods or computed props. However, there is still a way to do this. Let’s say our component accepts a “user” prop which is an object with “firstName” and “lastName”, and we want to render a template that shows the user’s full name (let’s just assume we don’t want to simply provide a “fullName” prop”. In a functional <template> component, the way we could do this is by providing a method right on our component definition, then use the $options property provided by Vue to access our special method:
• 18.
  Conclusion If you careabout performance or ar working on very large applications, consider getting in the practice of creating functional components. The small learning curve is worth the performance gains. References: https://vuejs.org/v2/guide/render-function.html#Functional-Components https://itnext.io/whats-the-deal-with-functional-components-in-vue-js-513a31eb72b0