Writing functional components

In Vue 2.0, you can declare a component as a functional one by setting the functional field to true in the component’s options:

export default {
  functional: true,
}

This can also be done by setting functional directly on the template tag:

<template functional>
  <!— template code -->
</template>

And you can set how to render the component using the render() method of the component or the template section. However, if both fields exist, Vue takes the render() method.

In Vue 3.0 onward, however, Vue removed the functional attribute and you can only declare a functional component using a JavaScript function, which is the render function Vue will trigger to create the component:

const functionComp = (props, context) => {
 return h(/*…*/)
}

Once declared as functional, the component does not have any reactive state, and you can’t access this instance since it is not...