【vue回顾系列】02-组件和插件的区别是什么，Vue.use又是什么意思

前言

刚开始学习vue的时候，会搞不清楚插件的概念，也很难理解main.js中的Vue.use(xxx)是什么意思，这次就来讲明白。

其实官方也讲了，这里放个vue3的版本，vue2也差不多是这样的。

其实插件理解是什么意思就行了，具体怎么实现可以等有需求后再去官方文档上看着实现。

---

插件

因为我们对组件已经熟悉的不能再熟悉了，组件的说明就直接跳过，我们来看看插件是什么。

我的理解是插件是一种独立于业务代码之外的工具，例如vue-router、vuex、还有其他第三方的库。这些工具或者说库，一般都是挂到全局上。

插件怎么写

这里就从前端面试宝典网站中引用一个vue2例子：

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的一些api属性去写的。

插件的使用

在main.js中的new Vue()调用后以这样的格式去注册：

Vue.use(插件名字,{ /* 一个对象，写配置项 */} )

重复注册vue只会取一次，所以说Vue.use就是启用插件的意思。

插件使用的结果

有没有发现随着插件的加入，vue本身会越来越强大，也就是说插件和vue核心可以看做是一个整体，前者是对于vue的功能拓展和增强。

---

一句话总结区别

宝典网站上面总结的很好，我直接引用下：

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。