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对象链式操作代码(jquery)
Jul 04 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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/11/25 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
Javascript开发包大全整理
2006/12/22 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jquery $("#variable") 循环改变variable的值示例
2014/02/23 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
自我推荐书
2013/12/04 职场文书
网络技术专业推荐信
2014/02/20 职场文书
党务公开方案
2014/05/06 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL