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 获取页面的高度及滚动条的位置的代码
May 06 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
详解vue 组件的实现原理
Nov 12 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将任何格式视频转为flv的代码
2009/09/03 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python中常用的数据结构介绍
2021/01/12 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
社区平安建设方案
2014/05/25 职场文书
中职生求职信
2014/07/01 职场文书
三好生演讲稿
2014/09/12 职场文书
地道战观后感400字
2015/06/04 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
element多个表单校验的实现
2021/05/27 Javascript