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 使用个人心得
Feb 26 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
JS实现简单九宫格抽奖
Jun 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的Laravel框架中的event事件操作
2016/03/21 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Python设计密码强度校验程序
2020/07/30 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
Java里面有没有全局变量?为什么?
2015/02/06 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
担保书怎么写
2014/04/01 职场文书
白鹤梁导游词
2015/02/06 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
详解Vue的列表渲染
2021/11/20 Vue.js