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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
canvas的神奇用法
Feb 03 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 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扩展ZF――Validate扩展
2008/01/10 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php一个找二层目录的小东东
2012/08/02 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
jquery无缝图片轮播组件封装
2020/11/25 jQuery
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python字符串的修改方法实例
2019/12/19 Python
Python requests接口测试实现代码
2020/09/08 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
校长创先争优承诺书
2014/08/30 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
护士先进个人总结
2015/02/13 职场文书
赢在执行观后感
2015/06/16 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
python开发飞机大战游戏
2021/07/15 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python