Vue.use()

用vue开发的一定对Vue.use不陌生,在引入一些插件的时候经常需要在main里面用到这个语法。

不知道有没有人想过为什么有些插件需要用Vue.use才能用,有些直接使用。一般我们都是按照插件的使用方法直接用了,很少去想为什么。今天参考简书学习了一下。

先上一波简书上Vue.use官方源码:

export function initUse(Vue: GlobalAPI) {
    Vue.use = function (plugin: Function| Object) {
        // 限制了自定义组建的类型
        const installedPlugins =(this._installedPlugins || (this._installedPlugins =
            []))
        //保存注册组件的数组,不存在及创建
            if(installedPlugins.indexOf(plugin) > -1) {
        //判断该组件是否注册过,存在returnVue对象
                return this
            }
        //调用`toArray`方法
        const args = toArray(arguments,1)
        args.unshift(this)
        //将Vue对象拼接到数组头部
        if (typeof plugin.install ==='function') {
        //如果组件是对象,且提供install方法,调用install方法将参数数组传入,改变`this`指针为该组件
        plugin.install.apply(plugin,args)
    } else if (typeof plugin ==='function') {
        //如果传入组件是函数,这直接调用,但是此时的`this`指针只想为`null` 
        plugin.apply(null, args)
    }
    //在保存注册组件的数组中添加
        installedPlugins.push(plugin)
        return this
    }
}

toArray方法源码

export function toArray (list: any, start?:number): Array<any> {
 start = start || 0
  leti = list.length - start
//将存放参数的数组转为数组,并除去第一个参数(该组件)
 const ret: Array<any> = new Array(i)
//循环拿出数组
 while (i--) {
   ret[i] = list[i + start]
  }
 return ret
}

作者:茶树菇小学生 链接:https://www.jianshu.com/p/710fbbff15ba 來源:简书

已经解释的很清楚了,简单来说,当我们封装的插件是这样的:

export const testObj = {
install(Vue, arg) {
        }
    }

有install方法,那么就要使用Vue.use去初始化这个插件。这样写的好处就是插件需要一开始调用的方法都封装在install里面,更加精简和可拓展性更高。

如果封装的插件是靠这个对象去调用方法,比如axios,那么直接用的就是export default暴露出一个对象,那么就不需要使用Vue.use。

两者刚好让我们知道,如果一个插件是必须全部引入,那么使用暴露一整个对象,使用exportdefault或者是暴露一个用install的对象使用Vue.use。而像UI库那么庞大的插件,我们一般按需引入,那么就使用一个一个export的方法,使用花括号{}按需引入。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:Wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue全局注册

    Vue开发过程中经常会有公告的模板或者过滤器等,这些都要依赖vue全局注册一些方法、属性、模板等。

    wade
  • JavaScript数据类型

    我们一直在敲这些数据类型,却没有真的好好整理理解这些数据类型。这篇只是本人自己整理一下对于JavaScript数据类型的整理。

    wade
  • Webpack第五天

    现在已经可以热更新css和js,打包也能打包了,现在要做HTML的热更新。很惭愧,找了很多资料,总说纷纭,在使用了raw-loader之后,在入口文件引入HTM...

    wade
  • ServiceStack.Redis 使用教程

    环境准备 Redis (使用Windows版本做测试,运营环境建议使用Linux版本) ServiceStack.Redis-v3.00 在Windows上运行...

    张善友
  • 从minipack看打包原理

    minipack是一个小型的打包工具,作者ronami,用来解析打包工具的基本原理。代码中有相当多的注释,理解起来也非常容易。

    不作声
  • 建立可扩展的silverlight 应用框架 step-6

    整理导航模块“LeftNav” 首先说一下我想要实现的效果。 我希望在左侧的导航点击了以后右侧的主体部分发声变化。 之前我在LeftNav模块用的控件是Togg...

    用户1172164
  • QT实现登录界面(利用MySQL保存数据和邮箱辅助注册)

           断断续续黑框框下的学生管理系统,也写了不下三次,总在黑框框下呆着也不是一回事,想挑战用qt做一个界面版的学生管理系统,至于为什么选用qt+C++,...

    花狗Fdog
  • [android] surfaceview的生命周期

    SurfaceView控件在内部维护了一个双缓冲的技术,使用两个线程进行解析帧和显示到界面上

    陶士涵
  • H3C 链路聚合

    [SW-Ethernet1/0/1]port link-aggregation group 1

    py3study
  • VC遍历访问目录下的文件

    访问目录文件夹下的文件是经常需要的操作,C/C++和win32接口都没有提供直接调用的函数。在这里总结了几个经常用到的函数,通过MFC的CFileFind函数递...

    charlee44

扫码关注云+社区

领取腾讯云代金券