【中高】Vue中组件和插件有什么区别？

本节目标：理解“【中高】Vue中组件和插件有什么区别？”的核心思路，并能把它用于实际开发或面试表达。 ==一、组件是什么== ==回顾以前对组件的定义：== ==组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在====Vue====中每一个====.vue====文件都可以视为一个组件== ==组件的优势==

==降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现==

==调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单==

==提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级==

==#====二、插件是什么== ==插件通常用来为== ==Vue== ==添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：==

==添加全局方法或者属性。如====:== ==vue-custom-element==

==添加全局资源：指令====/====过滤器====/====过渡等。如== ==vue-touch==

==通过全局混入来添加一些组件选项。如====vue-router==

==添加== ==Vue== ==实例方法，通过把它们添加到== ==Vue.prototype== ==上实现。==

==一个库，提供自己的== ==API====，同时提供上面提到的一个或多个功能。如====vue-router==

==#====三、两者的区别==
==两者的区别主要表现在以下几个方面：==

==编写形式==

==注册形式==

==使用场景==

==#====编写形式==
==#====编写组件==
==编写一个组件，可以有很多方式，我们最常见的就是====vue====单文件的这种格式，每一个====.vue====文件我们都可以看成是一个组件==
==vue====文件标准格式==
<template></template><script>exportdefault{...}</script><style></style>
==我们还可以通过====template====属性来编写一个组件，如果组件内容多，我们可以在外部定义====template====组件内容，如果组件内容并不多，我们可直接写在====template====属性上==
<template id="testComponent">// 组件显示的内容<div>component!</div></template>Vue.component('componentA',{template:'#testComponent'template:`<div>component</div>`// 组件内容少可以通过这种形式})
==#====编写插件==
==vue====插件的实现应该暴露一个== ==install== ==方法。这个方法的第一个参数是== ==Vue== ==构造器，第二个参数是一个可选的选项对象==
MyPlugin.install=function(Vue,options){// 1. 添加全局方法或 propertyVue.myGlobalMethod=function(){// 逻辑...}// 2. 添加全局资源Vue.directive('my-directive',{bind(el,binding,vnode,oldVnode){// 逻辑...}...})// 3. 注入组件选项Vue.mixin({created:function(){// 逻辑...}...})// 4. 添加实例方法Vue.prototype.$myMethod=function(methodOptions){// 逻辑...}}

==#====注册形式==
==#====组件注册==
==vue====组件注册主要分为全局注册与局部注册==
==全局注册通过====Vue.component====方法，第一个参数为组件的名称，第二个参数为传入的配置项==
Vue.component('my-component-name',{/* ... */})
1
==局部注册只需在用到的地方通过====components====属性注册一个组件==
constcomponent1 ={...}// 定义一个组件exportdefault{components:{component1   // 局部注册}}

==#====插件注册==
==插件的注册通过====Vue.use()====的方式进行注册（安装），第一个参数为插件的名字，第二个参数是可选择的配置项==
Vue.use(插件名字,{/* ... */})
1
==注意的是：==
==注册插件的时候，需要在调用== ==new Vue()== ==启动应用之前完成==
==Vue.use====会自动阻止多次注册相同插件，只会注册一次==
==#====使用场景==
==具体的其实在插件是什么章节已经表述了，这里在总结一下==
==组件== ==(Component)== ==是用来构成你的== ==App== ==的业务模块，它的目标是== ==App.vue==
==插件== ==(Plugin)== ==是用来增强你的技术栈的功能模块，它的目标是== ==Vue== ==本身==
==简单来说，插件就是指对====Vue====的功能的增强或补充==
==#====参考文献==

> 来自

 <https://vue3js.cn/interview/vue/components_plugin.html#%E4%B8%89%E3%80%81%E4%B8%A4%E8%80%85%E7%9A%84%E5%8C%BA%E5%88%AB>

【中高】Vue中组件和插件有什么区别？ ​

【中高】Vue中组件和插件有什么区别？