Vue中组件和插件有什么区别?

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、组件是什么？
二、插件是什么
总结

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件是什么？

是把图形、非图形的各种逻辑抽象为一个统一的概念(组件)来实现开发的模式，在Vue中.vue文件视为一个组件。

组件的优势：

耦合度降低，在保持接口不变的情况下，可以替换组件完成需求，
方便调试，整个系统是通过组件组合起来的，在出现问题时，用排除法直接移除组件，或者根据报错的组件快速定位问题，
提高可维护性，组件的职责单一，复用性，对代码进行优化可获得系统的整体升级

二、插件是什么

插件通常用来为 Vue添加全局功能。功能范围没有严格的限制--一般有下面几种：

添加全局方法或者属性。如：vue-custom-element
添加全局资源：指令/过滤器/过渡等。如：vue-touch
通过全局混入来添加一些组件选项。如：vue-router
添加Vue实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自身的API，同时提供上面提到的一个或多个功能。如 vue-router

三.区别

以下几个方面：

编写形式
注册形式
使用场景

编写形式

最常见的 vue单文件的格式

html 复制代码

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

编写插件

vue插件的实现应该暴露一个install方法。第一个参数是Vue构造器，第二个参数是一个可选的选项对象

javascript 复制代码

csPlugin.install = function(Vue,options){
	//1.添加全局方法或property
	Vue.csGlobalMethod = function(){
		//
	}
	//2.添加全局资源
	Vue.directive('cs-directive',{
		bind(el,binding,vnode,oldVnode){
			//
		}
	})
	//3.注入组件选项
	Vue.mixin({
		created:function(){
			//
		}
	})
	//4.添加实例方法
	Vue.prototype.$csMethod = function(methodOptions){
		//
	}
}

注册形式

组件注册

分为全局注册和局部注册

全局注册通过 Vue.component 方法，第一个参数为组件的名称，第二个参数为传入的配置项

javascript 复制代码

Vue.component('cs-component-name',{})

局部注册只需要在用到地方通过 components 属性注册一个组件

javascript 复制代码

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

插件注册

通过 Vue.use()的方式进行注册，第一个参数为插件的名字，第二个参数是可选择的配置项

javascript 复制代码

Vue.use(name,{})

注意的是：

注册插件时，需在调用 new Vue() 启动应用之前完成

Vue.use 会自动阻止多次注册相同插件，只会注册一次

总结

组件(Component) 用来构成应用的业务模块，目标是App.vue

插件(Plugin) 是用来增强你的技术栈的功能模块，目标是Vue本身功能的增强或补充