Summary of the differences between plug-ins and components in vue and usage

Operating environment of this tutorial: Windows 7 system, vue 2.9.6 version, DELL G3 computer.

1. What are the components

Review previous definitions of components:

Components are the development model that abstracts all kinds of logic of graphics and non-graphics into a unified concept (component). In Vue, each .vue file can be regarded as a component.

Advantages of components

• Reduce the coupling degree of the entire system. While keeping the interface unchanged, we can replace different components to quickly complete the requirements. For example, the input box can be replaced with calendar, time, range and other components for specific implementation.
• Debugging is convenient. Since the entire system is combined through components, when problems arise, the components can be directly removed by exclusion, or the problem can be quickly positioned based on the error component. The reason why it can be quickly positioned is because each component is low coupling and has a single responsibility, so the logic is simpler than analyzing the entire system.
• Improve maintainability, since each component has a single responsibility and components are reused in the system, optimizing the code can achieve an overall upgrade of the system

2. What is a plug-in

Plugins are often used to add global functionality to Vue. There are no strict restrictions on the functional scope of the plug-in - there are generally the following:

• Add global methods or attributes. For example: vue-custom-element
• Add global resources: directives/filters/transitions, etc. Such as vue-touch
• Add some component options by global mixing. Such as vue-router
• Add Vue instance methods, by adding them to them.
  
• A library that provides its own API while providing one or more of the functions mentioned above. Such as vue-router
  

3. The difference between the two

The difference between the two is mainly reflected in the following aspects:

• Writing Form
• Registration Form
• Use scenarios

Writing Form

Writing components

There are many ways to write a component. The most common one is the format of vue single file. We can see each .vue file as a component.

vue file standard format

<template>
</template>
<script>
export default{ 
    ...
}
</script>
<style>
</style>

We can also write a component through the template attribute. If there are many components, we can define the template component content externally. If there are not many components, we can directly write it on the template attribute

<template >     // Content displayed by the component    <div>component!</div>   
</template>
 
('componentA',{ 
    template: '#testComponent'  
    template: `<div>component</div>`  // There is little component content in this form})

Writing plugins

The implementation of the vue plugin should expose an install method. The first parameter of this method is the Vue constructor, and the second parameter is an optional option object

 = function (Vue, options) {
  // 1\. Add global method or property   = function () {
    // Logic...  }
 
  // 2\. Add global resources  ('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // Logic...    }
    ...
  })
 
  // 3\. Inject component options  ({
    created: function () {
      // Logic...    }
    ...
  })
 
  // 4\. Add an instance method  .$myMethod = function (methodOptions) {
    // Logic...  }
}

Registration Form

Component registration

vue component registration is mainly divided into global registration and local registration

Global registration method, the first parameter is the name of the component, and the second parameter is the passed configuration item

('my-component-name', { /* ... */ })

Local registration only requires registering a component through the components property where it is used.

const component1 = {...} // Define a component export default {    components:{
        component1   // Local registration    }}

Plugin registration

The registration of the plug-in is registered (installed) through () method. The first parameter is the name of the plug-in, and the second parameter is the optional configuration item.

(Plugin name,{ /* ... */} )

Note that:

When registering a plug-in, you need to complete it before calling new Vue() to start the application.

It will automatically prevent the registration of the same plug-in multiple times, and will only register once.

Use scenarios

The specific chapter of the plug-in is actually stated, so I will summarize it here

Component is the business module used to form your app, and its goal is

Plugin is a functional module used to enhance your technology stack, and its goal is Vue itself

Simply put, plug-ins refer to enhancements or supplements to Vue's functions.

This is the article about the differences and usage of plug-ins and components in vue. This is the end. For more information about the differences between plug-ins and components in vue, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!