20 VUE学习：插件

news2024/11/19 1:38:18

介绍

在这里插入图片描述

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例：

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可选的选项 */
})

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的[应用实例]和传递给 app.use() 的额外选项作为参数：

const myPlugin = {
  install(app, options) {
    // 配置此应用
  }
}

插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：

通过 [app.component()]和 [app.directive()]注册一到多个全局组件或自定义指令。
通过 [app.provide()]使一个资源[可被注入]进整个应用。
向 [app.config.globalProperties]中添加一些全局实例属性或方法
一个可能上述三种都包含了的功能库 (例如 [vue-router])。

编写一个插件

在这里插入图片描述

为了更好地理解如何构建 Vue.js 插件，我们可以试着写一个简单的 i18n ([国际化 (Internationalization)] 的缩写) 插件。

让我们从设置插件对象开始。建议在一个单独的文件中创建并导出它，以保证更好地管理逻辑，如下所示：

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 在这里编写插件代码
  }
}

我们希望有一个翻译函数，这个函数接收一个以 . 作为分隔符的 key 字符串，用来在用户提供的翻译字典中查找对应语言的文本。期望的使用方式如下：

<h1>{{ $translate('greetings.hello') }}</h1>

这个函数应当能够在任意模板中被全局调用。这一点可以通过在插件中将它添加到 app.config.globalProperties 上来实现：

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 注入一个全局可用的 $translate() 方法
    app.config.globalProperties.$translate = (key) => {
      // 获取 `options` 对象的深层属性
      // 使用 `key` 作为索引
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

我们的 $translate 函数会接收一个例如 greetings.hello 的字符串，在用户提供的翻译字典中查找，并返回翻译得到的值。

用于查找的翻译字典对象则应当在插件被安装时作为 app.use() 的额外参数被传入：

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

这样，我们一开始的表达式 $translate('greetings.hello') 就会在运行时被替换为 Bonjour! 了。

请谨慎使用全局属性，如果在整个应用中使用不同插件注入的太多全局属性，很容易让应用变得难以理解和维护。

插件中的 Provide / Inject

在插件中，我们可以通过 provide 来为插件用户供给一些内容。举例来说，我们可以将插件接收到的 options 参数提供给整个应用，让任何组件都能使用这个翻译字典对象。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}

现在，插件用户就可以在他们的组件中以 i18n 为 key 注入并访问插件的选项对象了。

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>

插件和组件傻傻分不清楚

Vue插件和组件是Vue.js框架中的两个重要概念，它们在功能和使用方式上有一些区别和联系。

区别：

定义和用途：
- 组件：组件是Vue应用中的基本构建块，用于构建用户界面。一个组件封装了HTML、CSS和JavaScript，可以在应用中重复使用。组件通常用于构建UI的某个部分，比如按钮、表单、列表等。
- 插件：插件则是用来增强Vue本身的功能。插件可以是一个库，提供全局的功能，如添加全局方法或属性、添加实例方法、使用mixin、添加全局资源（如指令、过滤器、过渡等）、提供Vue实例的生命周期钩子等。
使用范围：
- 组件：组件通常是局部的，它们在特定的Vue实例或组件中注册和使用。
- 插件：插件通常是全局的，一旦安装，它的功能就可以在整个应用中使用。
注册方式：
- 组件：组件可以通过Vue.component()全局注册，也可以在组件的components选项中局部注册。
- 插件：插件需要使用Vue.use()方法来安装，这个方法会调用插件的install方法，并传入Vue构造函数。