Vue.use是干什么的？原理是什么？
原创
Vue.use是干什么的？原理是什么？
原创
前端小tips
发布于 2021-11-29 19:06:14
发布于 2021-11-29 19:06:14
Vue.use()是用来使用插件的。
插件的作用：插件通常用来为Vue添加全局功能，插件的功能没有严格的限制，一般有以下几种：
- 添加
全局方法或property,如：vue-custom-element - 添加全局资源：
指令、过滤器、过度等，如：vue-touch - 通过全局混入来添加一些组件选项，如： vue-router
- 添加Vue实例方法，通过把它们添加到
Vue.prototype上实现 - 一个库，提供自己的API,同时提供上边的一种或几种功能，如： vue-router
通过全局方法 Vue.use()使用插件，它需要你在调用new Vue()启用应用之前完成。
// 调用 myPlugin.install(Vue)
Vue.use(myPlugin)
new Vue({
// ...组件选项
})也可以传入一个可选的选项对象：
Vue.use(myPlugin,{someOptions:true})Vue.use会自动阻止多次注册相同的插件，届时即使多次调用也只会注册一次该插件
Vue.js 官方提供的一些插件，如：vue-router，在检测到 Vue是可访问的全局变量时，会自动调用Vue.use(),然而在像
CommonJS这样的模块环境中，你应该始终显式的调用Vue.use()
// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
const Vue = require('vue')
const VueRouter = require('vue-router')
//别忘了调用此方法
Vue.use(VueRouter )开发插件
- Vue.js的插件，应该暴露一个
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.use用法
- 安装Vue.js插件，如果插件是一个
对象,必须提供install方法，如果插件是一个函数，它会被作为install方法，install方法调用是，会将Vue作为参数传入 - Vue.use()需要在 调用 new Vue()之前被调用
##### 所以，Vue.use的参数必须是一个Object对象或者function函数,如果是对象的话，必须要提供install方法，之后会将Vue作为参数传入
也就是说：
- Vue.use的参数为函数时，这个函数的参数是 Vue对象
- Vue.use的参数为对象时，install方法的参数是Vue对象
Vue.use的源码
import { toArray } from '../util/index'
// Vue.use 源码
export function initUse (Vue: GlobalAPI) {
// 首先先判断插件plugin是否是对象或者函数：
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// 取vue.use参数,toArray() 方法代码在下一个代码块
const args = toArray(arguments, 1)
args.unshift(this)
// 判断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}// toArray 方法源码
export function toArray (list: any, start?: number): Array<any> {
start = start || 0
let i = list.length - start
const ret: Array<any> = new Array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}总结 Vue.use()源码
- 首先判断插件 plugin 是否是对象或者函数 代码：
`plugin: Function | Object`- 判断Vue是否已注册过这个插件，如果注册过就跳出方法,代码：
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法
if (installedPlugins.indexOf(plugin) > -1) {
return this
}- 处理Vue.use的入参，将第一个参数之后的参数归集,并在首部塞入this上下文，代码：
const args = toArray(arguments, 1)
args.unshift(this)- 断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。代码：
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}- 缓存插件,代码：
installedPlugins.push(plugin)原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
作者已关闭评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号