Vue.use() 到底干了什么(源码分析)

Vue.use()是全局注册一个组件或者插件的方法。每次注册前,都会判断一下这个组件或者插件(plugins)是否注册过,如果注册过,就不会再次注册了。
插件(plugins),它的功能范围没有严格的限制,一般包含如下几种:

  1. 添加全局方法或者属性。如: vue-custom-element
  2. 添加全局资源:指令/过滤器/过渡/组件等。如 vue-touch
  3. 通过全局混入来添加一些组件选项。如 vue-router
  4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

initUse的源码:

// Vue源码文件路径:src/core/global-api/use.js
 
import { toArray } from '../util/index'
//initUse函数接受也一个参数,参数值为Vue实例
export function initUse (Vue: GlobalAPI) {  
	//Vue.use函数接受的第一个参数为一个函数或者一个对象(注意:如果是对象,对象里面一定个要有install属性名,且值为一个函数)
  	Vue.use = function (plugin: Function | Object) {  
  	//声明变量installedPluguns,并指向this._installedPluguns
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))  
    //判断插件是否注册过,如果已经注册了,不允许重复注册。
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
 
    // additional parameters  将我们传入的参数整理成数组 => const args = toArray(arguments, 1)
    // 把通过Vue.use()传入的参数,除开第一个,从第二个参数开始全部取出存储在args中,并向args数组开头添加一个元素,此元素为Vue实例,(所以plugin对应的方法在执行的时候,第一个参数永远是Vue实例)
    const args = toArray(arguments, 1)
    args.unshift(this)  
    //开始执行要注册的插件函数
    //1.如果传入的插件是一个对象,且对象中有install属性,且此属性对应的值是一个函数  
    if (typeof plugin.install === 'function') {  
    	// 我们就调用这个plugin的install方法并将整理好的数组当成参数传入install方法中
     	plugin.install.apply(plugin, args)  
    //2.如果传入的插件直接就是一个函数
    } else if (typeof plugin === 'function') {  
    	// 我们就直接调用这个函数并将整理好的数组当成参数传入
        plugin.apply(null, args)  
    }
    // 把刚刚注册的插件添加到installedPlugins中,用作记录是否注册过此插件
    installedPlugins.push(plugin) 
    // 最后返回Vue对象
    return this  
  }
}

toArray源码:

// Vue源码文件路径:src/core/shared/util.js
 
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
}

总结:

第一,判断这个插件是否被注册过,如果已经注册了,不允许重复注册。如果插件没有被注册过,那么注册成功之后会给插件添加一个installed的属性,其值为true。Vue.use方法内部会检测插件的installed属性,从而避免重复注册插件.
第二,接收的plugin参数的限制是Function | Object两种类型之一。

自己来实现一个插件也是超级简单,只要对外暴露一个install方法即可,在使用Vue.use的时候,会调用这个方法。所以我们只要将要实现的内容放到install内部即可。这样的好处就是插件需要一开始调用的方法都封装在install里面,更加精简和可拓展性更高。

以后编写插件的时候可以有两种方式
一种是将这个插件的逻辑封装成一个对象,最后在install编写业务代码暴露给Vue对象。
还有一种则是将所有逻辑都编写成一个函数暴露给Vue。
两种方法原理都一样,第二种就是将这个插件直接当成install函数来处理。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值