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 相关文章推荐
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jQuery选择器全面总结
Jan 06 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
js数组依据下标删除元素
Apr 14 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
Aug 16 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 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 缓冲的免费实现方法
2006/10/09 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP 断点续传实例详解
2017/11/11 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
javascript 闭包疑问
2010/12/30 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
javascript操作符"!~"详解
2015/02/10 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python访问类中docstring注释的实现方法
2015/05/04 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python 爬虫性能相关总结
2020/08/03 Python
生产部主管岗位职责
2014/01/06 职场文书
愚人节活动策划方案
2014/03/11 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android