- 第1节:Vue 3.0 安装
- 第2节:Vue 3.0 介绍
- 第3节:Vue 3.0 应用&组件实例
- 第4节:Vue 3.0 模板语法
- 第5节:Vue 3.0 Data Property和方法
- 第6节:Vue 3.0 计算属性和侦听器
- 第7节:Vue 3.0 Class与Style绑定
- 第8节:Vue 3.0 条件渲染
- 第9节:Vue 3.0 列表渲染
- 第10节:Vue 3.0 事件处理
- 第11节:Vue 3.0 表单输入绑定
- 第12节:Vue 3.0 组件基础
- 第13节:Vue 3.0 组件注册
- 第14节:Vue 3.0 Props
- 第15节:Vue 3.0 非Prop的Attribute
- 第16节:Vue 3.0 自定义事件
- 第17节:Vue 3.0 插槽
- 第18节:Vue 3.0 提供/注入
- 第19节:Vue 3.0 动态组件&异步组件
- 第20节:Vue 3.0 模板引用
- 第21节:Vue 3.0 处理边界情况
- 第22节:Vue 3.0 过渡&动画概述
- 第23节:Vue 3.0 进入过渡&离开过渡
- 第24节:Vue 3.0 列表过渡
- 第25节:Vue 3.0 状态过渡
- 第26节:Vue 3.0 混入
- 第27节:Vue 3.0 自定义指令
- 第28节:Vue 3.0 Teleport
- 第29节:Vue 3.0 渲染函数
- 第30节:Vue 3.0 插件
- 第31节:Vue 3.0 响应性 深入响应性原理
- 第32节:Vue 3.0 响应性 基础
- 第33节:Vue 3.0 响应式 计算和侦听
- 第34节:Vue 3.0 组合式API 介绍
- 第35节:Vue 3.0 组合式API Setup
- 第36节:Vue 3.0 组合式API 生命周期钩子
- 第37节:Vue 3.0 组合式API 提供/注入
- 第38节:Vue 3.0 组合式API 模板引用
- 第39节:Vue 3.0 渲染机制和优化
- 第40节:Vue2中的更改检测警告
- 第41节:Vue 3.0 单文件组件
- 第42节:Vue 3.0 测试
- 第43节:Vue 3.0 TypeScript支持
- 第44节:Vue 3.0 Mobile
- 第45节:Vue 3.0 路由
- 第46节:Vue 3.0 状态管理
- 第47节:Vue 3.0 服务端渲染
- 第48节:Vue 3.0 应用配置
- 第49节:Vue 3.0 应用API
- 第50节:Vue 3.0 全局API
- 第51节:Vue 3.0 选项 Data
- 第52节:Vue 3.0 选项 DOM
- 第53节:Vue 3.0 选项 生命周期钩子
- 第54节:Vue 3.0 选项/资源
- 第55节:Vue 3.0 选项 组合
- 第56节:Vue 3.0 选项 杂项
- 第57节:Vue 3.0 实例property
- 第58节:Vue 3.0 实例方法
- 第59节:Vue 3.0 指令
- 第60节:Vue 3.0 特殊指令
- 第61节:Vue 3.0 内置组件
- 第62节:Vue 3.0 响应性基础 API
- 第63节:Vue 3.0 响应性API Refs
- 第64节:Vue 3.0 响应性API Computed与watch
- 第65节:Vue 3.0 组合式API
Vue 3.0 插件
插件是自包含的代码,通常向 Vue 添加全局级功能。它可以是公开 install()
方法的 object
,也可以是 function
插件的功能范围没有严格的限制——一般有下面几种:
- 添加全局方法或者 property。如:vue-custom-element
- 添加全局资源:指令/过滤器/过渡等。如:vue-touch
- 通过全局混入来添加一些组件选项。如:vue-router
- 添加全局实例方法,通过把它们添加到
config.globalProperties
上实现。 - 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如:vue-router
#编写插件
为了更好地理解如何创建自己的 Vue.js 版插件,我们将创建一个非常简化的插件版本,它显示 i18n
准备好的字符串。
每当这个插件被添加到应用程序中时,如果它是一个对象,就会调用 install
方法。如果它是一个 function
,则函数本身将被调用。在这两种情况下——它都会收到两个参数:由 Vue 的 createApp
生成的 app
对象和用户传入的选项。
让我们从设置插件对象开始。建议在单独的文件中创建它并将其导出,如下所示,以保持包含的逻辑和分离的逻辑。
// plugins/i18n.js
export default {
install: (app, options) => {
// Plugin code goes here
}
}
我们想要一个函数来翻译整个应用程序可用的键,因此我们将使用 app.config.globalProperties
暴露它。
该函数将接收一个 key
字符串,我们将使用它在用户提供的选项中查找转换后的字符串。
// plugins/i18n.js
export default {
install: (app, options) => {
app.config.globalProperties.$translate = key => {
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, i18n)
}
}
}
我们假设用户使用插件时,将在 options
参数中传递一个包含翻译后的键的对象。我们的 $translate
函数将使用诸如 greetings.hello
之类的字符串,查看用户提供的配置内部并返回转换后的值-在这种情况下为 Bonjour!
。
例如:
greetings: {
hello: 'Bonjour!'
}
插件还允许我们使用 inject
为插件的用户提供功能或 attribute。例如,我们可以允许应用程序访问 options
参数以能够使用翻译对象。
// plugins/i18n.js
export default {
install: (app, options) => {
app.config.globalProperties.$translate = key => {
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, i18n)
}
app.provide('i18n', options)
}
}
插件用户现在可以将 inject[in18]
到他们的组件并访问该对象。
另外,由于我们可以访问 app
对象,因此插件可以使用所有其他功能,例如使用 mixin
和 directive
。要了解有关 createApp
和应用程序实例的更多信息,请查看 Application API 文档。
// plugins/i18n.js
export default {
install: (app, options) => {
app.config.globalProperties.$translate = (key) => {
return key.split('.')
.reduce((o, i) => { if (o) return o[i] }, i18n)
}
app.provide('i18n', options)
app.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// some logic ...
}
...
})
app.mixin({
created() {
// some logic ...
}
...
})
}
}
#使用插件
在使用 createApp()
初始化 Vue 应用程序后,你可以通过调用 use()
方法将插件添加到你的应用程序中。
我们将使用在编写插件部分中创建的 i18nPlugin
进行演示。
use()
方法有两个参数。第一个是要安装的插件,在这种情况下为 i18nPlugin
。
它还会自动阻止你多次使用同一插件,因此在同一插件上多次调用只会安装一次该插件。
第二个参数是可选的,并且取决于每个特定的插件。在演示 i18nPlugin
的情况下,它是带有转换后的字符串的对象。
INFO
如果你使用的是第三方插件 (例如 Vuex
或 Vue Router
),请始终查看文档以了解特定插件期望作为第二个参数接收的内容。
import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'
const app = createApp(Root)
const i18nStrings = {
greetings: {
hi: 'Hallo!'
}
}
app.use(i18nPlugin, i18nStrings)
app.mount('#app')