1. 前言
最近在编写前端项目底层的时候,发现我们在导入其他UI库的时候,都会执行vue.use()进行挂载,比如全部导入antd、element UI库
//antd
import Vue from 'vue';
import Antd from 'ant-design-vue';
Vue.use(Antd);
//element
import Vue from 'vue';
import ElementUI from 'element-ui';;
Vue.use(ElementUI);
之后我们就可以全局引用他们内部的所有组件
2.vue.use在vue中的使用
在vue官方文档插件一章中,详细介绍use方法是用来使用插件的功能,插件通常为vue添加全局功能的,比如以下:
- 添加全局的方法和属性
- 添加全局的资源,如全局组件、全局过滤器、全局的指令
- 全局来混入添加一些组件选项
- 添加vue实例方法,vue.prototype.$const
当我们开发插件的时候,就需要使用use方法进行注册,代码如Vue.use(myPlugin),其中的myPlugin可以是function | object,object需要提供一个install方法,我们编写自己的插件代码如下
//1.plugins.js
export default (Vue)=>{
//全局方法
Vue.myGlobalMethod = function(){}
//全局指令资源
Vue.directive('copy',{
bind:function(){}
})
//组件选项
Vue.mixin({
create:function(){}
})
//实例方法
Vue.prototype.$const = function(){}
}
//2.注册使用
import plugins from './plugins.js
Vue.use(plugins)
//3.支持链式调用
Vue.use(router).use(plugins)
再思考一下,我们可以直接在入口文件直接写这些的代码的
//比如注册实例方法
//main.js
import Vue from 'vue'
vue.prototype.$const = function(){}
new Vue()
确实我们不使用use方法进行注册也是可以实现,但是如果你的项目很大的时候,main.js文件会变得非常臃肿,可读性极差,而且现在是模块化开发时代了;不过这样也给了我们提示来思考use源码,1.直接执行插件内部的函数,2.返回Vue构造方法;use还有一个作用是插件只注册一次之后就不在注册,为了想清楚其中的原理,我们去找一下vue源码的中use实现来讲解
3. vue.use源码
下面直接贴上vue.use源码:
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
一行代码解析代码作用
Vue.use = function (plugin: Function | Object) {
//给Vue构造方法添加一个安装插件属性,用来记录安装过的插件
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
//如果插件已经存在了,直接返回Vue构造方法
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// 将实际参数类数组转换成数组
const args = toArray(arguments, 1)
// 往首位添加Vue构造方法
args.unshift(this)
//判断传递过滤的插件是函数还是一个数组,直接进行执行
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
//添加到Vue构造方法的安装属性中
installedPlugins.push(plugin)
//返回Vue构造方法,方便链式调用
return this
}
以上就是vue.use的全部源码,比较简短,内部的思想我们可以学以致用。附上源代码地址:github.com/vuejs/vue/b…
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!