面试官：Vue中组件和插件有什么区别？

超、凢脫俗 2022-12-27 04:46 165阅读 0赞

##  ##

![format_png][]

## 一、组件是什么    ##

回顾一下对组件的定义：

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在`Vue`中每一个`.vue`文件都可以视为一个组件

组件的优势

*  降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
 *  调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
 *  提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

## 二、插件是什么 ##

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

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

## 三、两者的区别 ##

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

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

### 编写形式 ###

#### 编写组件 ####

编写一个组件，可以有很多方式，我们最常见的就是`vue`单文件的这种格式，每一个`.vue`文件我们都可以看成是一个组件

`vue`文件标准格式

<template>
    </template>
    <script>
    export default{ 
        ...
    }
    </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. 添加全局方法或 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) {
        // 逻辑...
      }
    }

### 注册形式 ###

#### 组件注册 ####

`vue`组件注册主要分为全局注册与局部注册

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

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

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

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

#### 插件注册 ####

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

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

注意的是：

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

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

### 使用场景 ###

具体的其实在插件是什么章节已经表述了，这里在总结一下

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

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

简单来说，插件就是指对`Vue`的功能的增强或补充

## 参考文献 ##

*  https://vue3js.cn/docs/zh

面试官VUE系列总进度：9／33

[面试官：说说你对vue的理解?][vue]

[面试官：说说你对SPA（单页应用）的理解?][SPA]

[面试官：说说你对双向绑定的理解?][Link 1]

[面试官：说说你对Vue生命周期的理解?][Vue]

[面试官：Vue组件间通信方式都有哪些?][Vue 1]

[面试官：Vue中的v-show和v-if怎么理解？][Vue_v-show_v-if]

[面试官：为什么Vue中的v-if和v-for不建议一起用?][Vue_v-if_v-for]

[面试官：SPA（单页应用）首屏加载速度慢怎么解决？][SPA 1]

![format_png 1][]

[format_png]: /images/20221120/72d05d80f1634ad4b0118bbacba055ad.png
[vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c093cb674985ef3bd2966f66fc28c5eb70b0037e4be1af4bf54fb6fa9571985abd31d52f&idx=1&mid=2247484101&scene=21&sn=83b0983f0fca7d7c556e4cb0bff8c9b8#wechat_redirect
[SPA]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c081cb6749976814aaeda6a6433db418223cec57edda7e15b9e5a0ca69ad549655639c61&idx=1&mid=2247484119&scene=21&sn=d171b28a00d42549d279498944a98519#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c151cb6748476008dab2f4e6c6264f5d19678305955c85cec1b619e56e8f7457b7357fb9&idx=1&mid=2247484167&scene=21&sn=7b00b4333ab2722f25f12586b70667ca#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c146cb67485015f24f7e9f5862c4c685fc33485fe30e1b375a534b4031978439c554e0c0&idx=1&mid=2247484176&scene=21&sn=5623421ed2678046ed9e438aadf6e26f#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c116cb674800b2757be9eb27fe20709de0e511b834d8bb6b23171218fa4a1cfd5f87596c&idx=1&mid=2247484224&scene=21&sn=3043891f60d99afcf74dffd6b9b51ff7#wechat_redirect
[Vue_v-show_v-if]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c113cb674805626c614b617491b5e6f7b0050f83106a8a9cd1e640eb8526d43eee01c716&idx=1&mid=2247484229&scene=21&sn=538d5c37cd91c3a2f9431f8fd120fc90#wechat_redirect
[Vue_v-if_v-for]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c130cb674826510f82810856ca589c5b73b8e1385f179b9ba2bc8bab89bb1db3ff6e53ed&idx=1&mid=2247484262&scene=21&sn=cf0928603e7cf14189b4328366f70836#wechat_redirect
[SPA 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c122cb674834677de9dea791c9f956ad8c5121b007586c25fb11bc07910f47a6ffb99176&idx=1&mid=2247484276&scene=21&sn=7a980dd7db86f0194b802b815913cff2#wechat_redirect
[format_png 1]: /images/20221120/4444af3bb67b4eb3b380d9dd9a5afca5.png