脚本宝典收集整理的这篇文章主要介绍了

解读Vue.use()源码

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

Vue.use()

vue.use()的作用:


官方文档的解释:

安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

vue.use()使用情景:


可以在项目中使用vue.use()全局注入一个插件,从而不需要在每个组件文件中import插件。例如:
不使用vue.use()注入插件:

const utils = require('./utils')
// 或者
import utils from './utils'

使用vue.use()注入插件,最典型的案例:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

使用了vue.use()注册插件之后就可以在所有的vue文件中使用路由:
this.$route

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()源码中采用了flow的语法。flow语法,官方解释是:

Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale.

简单的意思就是flow是JavaScript代码的静态类型检查工具。官网链接
使用flow的好处就是:在编译期对js代码变量做类型检查,缩短调试时间, 减少因类型错误引起的bug。我们都知道js是解释执行语言,运行的时候才检查变量的类型,flow可以在编译阶段就对js进行类型检查。

下面将对vue.use()源码进行解读:

1、首先先判断插件plugin是否是对象或者函数:
Vue.use = function (plugin: Function | Object)

2、判断vue是否已经注册过这个插件
installedPlugins.indexOf(plugin) > -1
如果已经注册过,跳出方法

3、取vue.use参数。
const args = toArray(arguments, 1)

4、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
  }

let i = list.length - start意思是vue.use()方法传入的参数,除第一个参数外(第一个参数是插件plugin),其他参数都存储到一个数组中,并且将vue对象插入到参数数组的第一位。最后参数数组就是[vue,arg1,arg2,...]

5、判断插件是否有install方法,如果有就执行install()方法。没有就直接把plugin当Install执行。

if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }

plugin.install.apply(plugin, args)将install方法绑定在plugin环境中执行,并且传入args参数数组进install方法。此时install方法内的this指向plugin对象。
plugin.apply(null, args) plugin内的this指向null.

最后告知vue该插件已经注册过installedPlugins.push(plugin)保证每个插件只会注册一次。

总结


使用vue.use()注册插件,插件可以是一个函数,可以是一个带有install属性的对象。不管是函数还是install方法,第一个参数总是vue对象。
个人还是喜欢使用将插件的功能方法写在install方法里。因为install内的this指向的是plugin对象自身,扩展性更好。

总结

以上是脚本宝典为你收集整理的

解读Vue.use()源码

全部内容,希望文章能够帮你解决

解读Vue.use()源码

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过