Vue.use源码分析


Posted in Javascript onApril 22, 2017

我想有过vue开发经验的,对于vue.use并不陌生。当使用vue-resource或vue-router等全局组件时,必须通过Vue.use方法引入,才起作用。那么vue.use在组件引入之前到底做了那些事情呢?让我们一窥究竟。

先上vue.use源码

// javascript的方法是可以传递的,哈哈
Vue.use = function (plugin) {
  /* istanbul ignore if */
  if (plugin.installed) {
   return
  }
  // additional parameters
  var 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);
  }
  plugin.installed = true;
  return this
 };

假设我们通过Vue.use引入一个插件plugin(该插件可以暂时理解为一个变量或参数),即Vue.use(plugin); 

首先判断传入的参数plugin的属性installed是否存在,如果存在且逻辑值为真,那么直接返回,后边的代码就不会再执行,这个判断的作用是什么呢?后边会讲到。 

我们先假设plugin的属性installed不存在或为假,那么继续往下执行。

var args = toArray(arguments, 1);

//执行了一个toArray方法,toArray接收了两个参数,arguments为Vue.use方法传入的参数集合,例如Vue.use(a,b,c),那么arguments类似于[a,b,c](说明:arguments只是类数组,并不是真正的数组)。此处因为只引入一个参数plugin,所以arguments类似于[plugin]。

toArray的作用是什么呢?看源码。

function toArray (list, start){
 start = start || 0;
 var i = list.length - start;
 var ret = new Array(i);
 while (i--) {
 ret[i] = list[i + start];
 }
 return ret
}

当执行toArray(arguments,1),会生成一个新数组ret,长度 = arguments.length-1,然后进行while循环,依次倒序把arguments的元素赋值给ret,因为ret比arguments长度少1,所以最终等同于arguments把除了第一个元素外的其余元素赋值给ret。toArray主要作用就是把类数组转化为真正的数组,这样才能调用数组的方法。因为此处我只引入一个plugin参数,即arguments=[plugin],所以toArray返回为空数组[]。

接着往下执行,args.unshift(this),等同于[].unshift(Vue),即args = [Vue];然后执行

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

此处判断plugin的install是否为函数,如果为函数,立即执行pluign.install方法,install方法传入的参数为args内数组元素,即install接受的第一个参数为Vue.

如果plugin的install不是函数,那么判断plugin本身是否为函数,如果为函数,那么执行plugin函数,且参数为args内数组元素。

最后设置plugin.installed为true。设置plugin.installed为true的作用是避免同一个插件多次执行安装,比如Vue.use(plugin)执行一次之后,installed为true,再次执行的话走到第一步判断就返回了。

综上所述,Vue.use的作用其实就是执行一个plugin函数或者执行pluign的install方法进行插件注册,并且向plugin或其install方法传入Vue对象作为第一个参数,use的其他参数作为plugin或install的其他参数。

举个简单的例子

import Vue from 'vue'

function test(a){
 console.log(a);//Vue
}

function test1(a,b){
console.log(a,b);//Vue hello
}

let oTest = {
 install:function(a,b){
  console.log(a,b);//Vue hello1
 }
}

Vue.use(test);
Vue.use(test1,'hello');
Vue.use(oTest,'hello1');
console.log(oTest);
//{

install:function(){...},

installed:true
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
uploader秒传图片到服务器完整代码
Apr 22 #Javascript
Node.js中看JavaScript的引用
Apr 22 #Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 #Javascript
Ionic2调用本地SQlite实例
Apr 22 #Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 #Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 #Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 #Javascript
You might like
php防盗链的常用方法小结
2010/07/02 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
react native 仿微信聊天室实例代码
2019/09/17 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python对execl 处理操作代码
2020/06/22 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
经典而简洁的婚礼主持词
2014/03/13 职场文书
主持词开场白
2014/03/17 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
门卫管理制度范本
2015/08/05 职场文书
python析构函数用法及注意事项
2021/06/22 Python
Python上下文管理器Content Manager
2021/06/26 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python