(转)Vue.use源码分析
我想有过vue开发经验的,对于vue.use并不陌生。当使用vue-resource或vue-router等全局组件时,必须通过Vue.use方法引入,才起作用。那么vue.use在组件引入之前到底做了那些事情呢?让我们一窥究竟。
http://92node.com/blog/58f241fc07eeed18075a0643
先上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源码分析的更多相关文章
- Vue.js 源码分析(六) 基础篇 计算属性 computed 属性详解
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,比如: <div id="example">{{ messag ...
- Vue.js 源码分析(三十二) 总结
第一次写博客,坚持了一个多月时间,Vue源码分析基本分析完了,回过头也看也漏了一些地方,比如双向绑定里的观察者模式,也可以说是订阅者模式,也就是Vue里的Dep.Watcher等这些函数的作用,网上搜 ...
- Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解
当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...
- Vue.js 源码分析(三十) 高级应用 函数式组件 详解
函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...
- Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解
对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- Vue.js 源码分析(二十七) 高级应用 异步组件 详解
当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...
- Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解
普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...
- Vue.js 源码分析(二十五) 高级应用 插槽 详解
我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: ...
- Vue.js 源码分析(二十四) 高级应用 自定义指令详解
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...
随机推荐
- 转 appium解决每次运行都需要安装Unlock以及AppiumSetting的问题
一.需要解决的问题 在部分android机型上每次运行最新版的appium-desktop都需要安装AppiumSetting以及Unlock,并且安装过程需要用户手动来确认,即使测试机上已经安装了这 ...
- Oracle rman 脚本
1.shell脚本1)vi rman_backup.cmd#rman_backup.cmdconnect target /run{ allocate channel d1 device type d ...
- dubbo消费方超时处理
在我们分布式系统中,远程调用可能随时会出现调用超时,然后抛异常 在dubbo内部,默认设置的是500ms(好像是),所以,对于crud事物大的系统来讲肯定是要自定义超时时间咯,作为消费方,自然是优先级 ...
- 【 Keepalived 】Nginx or Http 主-主模式
上一篇:[ Keepalived ]Nginx or Http 主-备模式 在此基础上进行修改并实现 Keepalived主-主模式 首先,需要理解的是:主-备模式是一个VIP在工作,主-主模式则需要 ...
- 【 Linux】脚本导入格式
在从windows文本(*.txt)格式导入到Linux中时,需要注意. 如果是直接将*.txt 导入到Linux系统,然后重命名使用会有问题,建议在linux系统中创建文件,然后直接复制内容到lin ...
- C#实例:Unity依赖注入使用
http://jingyan.baidu.com/article/c74d6000840b260f6b595d78.html
- TCP 粘包及其解决方案(zz)
首先,我们回顾一下 TCP 和 UDP 的头部信息: 具体说明看:http://www.cnblogs.com/aomi/p/7776582.html 我们知道,TCP 和 UDP 是 TCP/IP ...
- mysql的一些工具(系统自带)
1.mysqld: 这个是mysqld服务器的主程序. 2.mysqld_safe: 这个是unix系统下,辅助mysql服务器启动的工具. 直接运行mysqld程序来启动MySQL服务的方法很少见, ...
- rhel 6.5 yum源的配置
https://blog.csdn.net/error_0_0_/article/details/54962199
- 在使用Arduino中遇到的问题(无法使用中文注释、程序无法下载)
在使用Arduino中遇到的问题: 在用arduino给蓝牙模块供电时,下载程序是下不进去的.即使显示下进去了,其实也是没下进去. 解决方法:拔掉蓝牙模块再下程序,或给蓝牙供电的线上加上一个开关. 在 ...