这篇文章将为大家详细讲解有关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 }
关于“Vue.use源码的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。