What is the difference between components and plugins in Vue?

What is the difference between components and plugins in Vue?

what is the component

A component is a pattern that abstracts various logics of graphics and non-graphics into a unified concept (component) to realize development, and each Vuefile in it .vuecan be regarded as a component

Advantages of components

• Reduce the coupling degree of the whole 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 components such as calendar, time, and range for specific implementation
• Debugging is convenient. Since the whole system is composed of components, when a problem occurs, the component can be removed directly by troubleshooting, or the problem can be quickly located according to the component that reported the error. The reason why it can be quickly located is because the relationship between each component Low coupling and single responsibility, so the logic will be simpler than analyzing the entire system
• Improve maintainability. Since each component has a single responsibility and the components are reused in the system, optimizing the code can obtain an overall upgrade of the system

what is a plugin

Plugins are often used to Vueadd global functionality to . There is no strict limit to the functional scope of the plug-in - generally there are the following types:

• Add global methods or properties. like:vue-custom-element
• Add global resources: directives/filters/transitions etc. likevue-touch
• Add some component options via global mixins. likevue-router
• Add Vueinstance methods by adding them Vue.prototypeto .
• A library that provides its own APIwhile providing one or more of the functions mentioned above. likevue-router

the difference between

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

• written form
• registration form
• scenes to be used

written form

Write components

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

Write a plugin

vuePlugin implementations should expose a installmethod . The first parameter of this method is Vuethe constructor , and the second parameter is an optional options object

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

registration form

register component

vueComponent registration is mainly divided into global registration and local registration

//全局注册
Vue.component('my-component-name', { /* ... */ })

//局部注册
const component1 = {...} // 定义一个组件

export default {
	components:{
		component1   // 局部注册
	}
}

Register plugin

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

Vue.use(插件名字,{ /* ... */} )

Please be aware of:

When registering a plug-in, it needs to be completed before calling new Vue()to start the application

Vue.useIt will automatically prevent multiple registrations of the same plugin, and only register once

scenes to be used

Components (Component)are used to form your Appbusiness modules, and its goal is toApp.vue

A plug-in (Plugin)is a functional module used to enhance your technology stack, and its goal is Vueitself

Simply put, a plug-in refers to Vuethe enhancement or supplement of the function