vue component classification

I. Introduction

The reason why I wrote this article is that I interviewed dozens of people as an interviewer some time ago. One of the questions is "what are the component classifications of vue? ", it's surprising that most people only answer global components and local components. Are the components of vue just these two? In fact, when it comes to classification, it is necessary to talk about classification standards. Those who do not have classification standards are all hooligans. Here is a personal summary. Don't spray if you don't like it.

Source address of github

Two. Classification

1. Classification by component registration method: it can be divided into global component and local component

Global component

a. Global component registration

Vue.component("my-component-name", {
  /****/
});

b. use

<my-component-name></my-component-name>

c. When do I need to register a component as a global component?

Generally, some basic components need to be used frequently (more than 3 times), and global registration is required. For example, common dialog components, search components, toast components, message components, etc.

Local components

a. Local component registration

import ComponentA from "./ComponentA.vue";
export default {
  components: {
    ComponentA
  }
  // ...
};

b. use

<component-a></component-a>

c. When do I need to register a component as a local component?

In general, components should be local components, which will greatly reduce the code volume after the application is built. However, it is troublesome for frequently used components. Therefore, it is recommended that components be registered as local components when they are used less frequently and larger. For example, table component, chart component, etc

2. According to whether the component has its own state, it can be divided into functional (stateless) component and ordinary (stateless) component

a. Functional components

new file

src/components/FunctionComponent/index.vue

The functional field marks the component as a functional component

jsx syntax is used in functional components

<script>
  import OtherComponent from "./other";
  export default {
    name: "FunctionComponent",
    functional: true,
    components: {
      OtherComponent
    },
    props: {
      title: {
        type: String,
        required: true
      }
    },
    render(h, { props }) {
      const { title } = props;
      return (
        <div>
          <p> I am a functional component</p>
          <p>props {title}</p>
          <OtherComponent otherInfo={title} title="I am another component of a functional component" />
        </div>
      );
    }
  };
</script>

src/components/FunctionComponent/other.vue

Template based functional component template label to mark functional

<template functional>
  <div>
    {{ props.title }}
    <p>
      otherInfo {{ props.otherInfo }}
    </p>
  </div>
</template>
<script>
  export default {
    functional: true,
    props: {
      title: {
        default: "",
        type: String
      },
      otherInfo: {
        default: "",
        type: String
      }
    }
  };
</script>

b. use

import FunctionComponent from "./components/FunctionComponent/index";

export default {
  components: {
    FunctionComponent
  }
};

<function-component title="Functional components" />

c. When do I need to write a component as a functional component?

In general, stateless (no response data) components can be registered as functional components, as if they are not functional components. Why should they be registered as functional components?

When a component is a functional component, it does not manage any state, nor does it listen for any state passed to it, nor does it have a lifecycle method. In fact, it is only a function that accepts some prop s, so the rendering cost is much lower.

3. Dynamic classification by component: it can be divided into dynamic component and ordinary (non dynamic) component

a. Dynamic components

new file

src/components/DynamicComponent/1.vue

<template>
  <div>
    //Dynamic component 1
  </div>
</template>

src/components/DynamicComponent/1.vue

<template>
  <div>
    //Dynamic component 1
  </div>
</template>

b. use

<button @click="toggle('1')">Click to switch component 1</button>
<button class="btn" @click="toggle('2')">Click to switch component 2</button>
<component :is="currentTabComponent"></component>

import DynamicComponent1 from "./components/DynamicComponent/1";
import DynamicComponent2 from "./components/DynamicComponent/2";
export default {
  components: {
    DynamicComponent1,
    DynamicComponent2
  },
  data() {
    return {
      currentTabComponent: "DynamicComponent1"
    };
  },
  methods: {
    toggle(type) {
      this.currentTabComponent = "DynamicComponent" + type;
    }
  }
};

Maybe you've seen it at most. Are you familiar with it

<button @click="toggle">Click to switch component 1</button>
<dynamic-component1 v-if="show" />
<dynamic-component2 v-else />

import DynamicComponent1 from "./components/DynamicComponent/1";
import DynamicComponent2 from "./components/DynamicComponent/2";
export default {
  components: {
    DynamicComponent1,
    DynamicComponent2
  },
  data() {
    return { show: false };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};

c. When do I need to write components as dynamic components?

In general, when switching between components is required, it seems that dynamic components are not needed. Why dynamic components?

Maybe when you write and import DynamicComponent1 from 1 to 10, and then template writes DynamicComponent1 10 times, its benefits come out.

4. Classification by asynchronous component: it can be divided into asynchronous component and ordinary (non asynchronous) component

a. Asynchronous component

In large applications, we may need to divide the application into smaller code blocks and load a module from the server only when necessary. To simplify, Vue allows you to define your components as a factory function that resolves your component definitions asynchronously. Vue will trigger the factory function only when this component needs to be rendered, and will cache the results for future re rendering

new file

src/components/AsyncComponent.vue

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.name">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "AsyncComponents",
    components: {},
    data() {
      return { list: [] };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        setTimeout(() => {
          const data = [
            { name: "Hello", time: "2019-01-01 10:10:55" },
            { name: "world", time: "2012012-01 12:20:00" }
          ];
          this.list = data;
        }, 2000);
      }
    }
  };
</script>

b. use

<async-component />

import AsyncComponent from "./components/AsyncComponent";
export default {
  components: {
    AsyncComponent
  }
};

c. When do I need to write components as asynchronous components?

Generally, components that need to load data from the server need to be used in multiple places, because it will cache the results for future re rendering.

What's more, we use the most in Vue Router. Asynchronous components combined with Webpack's code splitting function can easily achieve lazy loading of routing components.

5. Classification by whether the component is circular reference: it can be divided into recursive component and ordinary (non recursive) component

a. Recursive component

Components can be invoked in their own templates. But they can only do this through the name option.

new file

src/components/RecursiveComponent.vue

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.name">
        <span>{{ item.name }}</span>
        <recursive-component v-if="item.children" :list="item.children" />
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "RecursiveComponent",
    props: {
      list: {
        default: () => [],
        type: Array
      }
    }
  };
</script>

b. use

<recursive-component :list="list" />

import RecursiveComponent from "./components/RecursiveComponent";
export default {
  components: {
    RecursiveComponent
  },
  data() {
    return {
      list: [
        {
          name: "1",
          children: [
            {
              name: "1-1"
            },
            {
              name: "1-2",
              children: [
                {
                  name: "1-2-1"
                },
                {
                  name: "1-2-2"
                }
              ]
            }
          ]
        },
        {
          name: "2",
          children: [
            {
              name: "2-1",
              children: [
                {
                  name: "2-1-1"
                },
                {
                  name: "2-1-2",
                  children: [
                    {
                      name: "2-1-2-1"
                    },
                    {
                      name: "2-1-2-2"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    };
  }
};

c. When do I need to write a component as a recursive component?

Generally, components need to call themselves, such as tree components, sidebar routing components, etc

Three. Conclusion

Classification standard	Classification 1	Classification 2
Registration method	Global component	Local components
Are you in your own state	Functional (stateless) components	Normal (stateless) components
Is it dynamic?	Dynamic components	Normal (non dynamic) components
Asynchronous	Asynchronous component	Normal (non asynchronous) components
Circular reference or not	Recursive component	Normal (non recursive) components

Reference link

1.https://cn.vuejs.org/

2.https://router.vuejs.org/zh/