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

1. 什么是组件？

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

组件的优势：复用、解耦、便于维护、便于团队协作。

2. 插件是什么？

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

  • 添加全局方法或 property。
  • 添加全局资源：指令 / 过滤器 / 过渡等。
  • 通过全局 mixin 来添加一些组件选项。
  • 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

3. 两者有什么区别？

编写形式

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

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind(el, binding, vnode, oldVnode) {
      // 逻辑...
    },
    inserted() {},        // 被绑定元素插入父节点时调用
    update() {},          // 所在组件的 VNode 更新时调用，但可能发生在其子 VNode 更新之前
    componentUpdated() {}, // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
    unbind() {}           // 只调用一次，指令与元素解绑时调用
  })

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

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

注册形式不同

Vue 组件注册主要分为全局注册与局部注册。

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

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

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

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

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

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

注意：

  • 注册插件的时候，需要在调用 new Vue() 启动应用之前完成。
  • Vue.use 会自动阻止多次注册相同插件，只会注册一次。

使用场景

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

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

来源整理自：vue3js.cn 面试官系列