What

Functional is the API provided by Vue2. X that turns on functional components.

Go to the official link to get the explanation:

Make the component stateless (no data) and instance-free (no this context). They return virtual nodes with a simple render function to make them less expensive to render

If there is no data, it can be understood as unresponsive data.

Also: Functional components have no lifecycle hook functions.

If you add the functional attribute to the template tag, the view cannot render the Props passed:

<template functional>
  <! -- Content cannot render -->
  <p class="content">{{ content }}</p>
</template>
<script>
export default {
  props: {
    content: String}};</script>
Copy the code

According to the official instructions, to make up for the missing this instance, use the Render API for rendering

<script>
export default {
  functional: true.props: {
    content: String
  },
  render: (h, ctx) = > {
    console.log("this".this);   // undefined
    console.log("ctx", ctx);
    return h("span", ctx.props.content);   // Content rendered successfully}}; </script>Copy the code

The first parameter to Render, h, represents the createElement method, which is used to create the virtual DOM.

Note that the second parameter received, CTX, is an additional parameter for the functional component, and is an object representing context information that provides the data pass.

A FunctionalRenderContext with the following properties

Why

As the name implies, a functional component is a function that takes props, renders it with render, and returns the result.

A functional component cannot be considered a component (VueComponent), as follows:

Print the $refs object for a parent component that has both a button component and a functional component: no functional component information

The rendering generates a virtual DOM that acts as an HTMLElement and is accessible through $EL.

One of the characteristics of the combination: no this.

Conclusion: Functional components reduce the process of component instantiation, in contrast, there is no need to allocate excess memory, and performance is improved to a certain extent.

How

Functional components are used for component packaging to improve performance and speed up initialization.

The specific effect of optimization can be seen in the reference link

Last but not least

Add-ons: In Vue3. X, functional components are not compatible functions, mentions that the performance improvement of 2.x is negligible, and recommends using only stateful components (stateful components have been improved)

If there is anything wrong, please let me know