直接开始分析源码

// Vue源码文件路径:src/core/global-api/use.js

import { toArray } from '../util/index'
//initUse函数接受也一个参数,参数值为Vue实例
export function initUse (Vue: GlobalAPI) {  //Vue.use函数接受的第一个参数为一个函数或者一个对象(注意:如果是对象,对象里面一定个要有install属性名,且值为一个函数)
Vue.use = function (plugin: Function | Object) {   //声明变量installedPluguns,并指向this._installedPluguns
const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) //判断插件是否注册过,如果已经注册了,不允许重复注册。
if (installedPlugins.indexOf(plugin) > -1) {
return this
} // 把通过Vue.use()传入的参数,除开第一个,从第二个参数开始全部取出存储在args中,并向args数组开头添加一个元素,此元素为Vue实例,(所以plugin对应的方法在执行的时候,第一个参数永远是Vue实例)
const args = toArray(arguments, 1)
args.unshift(this)   //开始执行要注册的插件函数
  //1.如果传入的插件是一个对象,且对象中有install属性,且此属性对应的值是一个函数
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
  //2.如果传入的插件直接就是一个函数
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}   // 把刚刚注册的插件添加到installedPlugins中,用作记录是否注册过此插件
installedPlugins.push(plugin)
return this
}
}

顺便贴一下(toArray源码)

// Vue源码文件路径:src/core/shared/util.js

export function toArray (list: any, start?: number): Array<any> {
start = start || 0
let i = list.length - start
const ret: Array<any> = new Array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}

  

  

总结:

  第一,判断这个插件是否被注册过,如果已经注册了,不允许重复注册。

  第二,接收的plugin参数的限制是Function | Object两种类型之一。

以后编写插件的时候可以有两种方式。
一种是将这个插件的逻辑封装成一个对象,最后在install编写业务代码暴露给Vue对象。
还有一种则是将所有逻辑都编写成一个函数暴露给Vue。
两种方法原理都一样,第二种就是将这个插件直接当成install函数来处理。

Vue.use()源码分析且执行后干什么了的更多相关文章

  1. Vue.js 源码分析(六) 基础篇 计算属性 computed 属性详解

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,比如: <div id="example">{{ messag ...

  2. Vue.js 源码分析(三十二) 总结

    第一次写博客,坚持了一个多月时间,Vue源码分析基本分析完了,回过头也看也漏了一些地方,比如双向绑定里的观察者模式,也可以说是订阅者模式,也就是Vue里的Dep.Watcher等这些函数的作用,网上搜 ...

  3. Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...

  4. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

  5. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

  6. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  7. Vue.js 源码分析(二十七) 高级应用 异步组件 详解

    当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...

  8. Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

    普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...

  9. Vue.js 源码分析(二十五) 高级应用 插槽 详解

    我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: ...

随机推荐

  1. ckpt pb

    (t20190518) luo@luo-All-Series:/dev/disk_2019/mask_rcnn_20190518/Mask_RCNN_20190902/models/research$ ...

  2. flutter的 图片组件基本使用

    import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends Statele ...

  3. C++的override和final

    1.final用于让虚函数不可被重写 struct B2 { virtual void f() final {} // final 函数 }; struct D2 : B2 { virtual voi ...

  4. Flink 实现指定时长或消息条数的触发器

    Flink 中窗口是很重要的一个功能,而窗口又经常配合触发器一起使用. Flink 自带的触发器大概有: CountTrigger: 指定条数触发 ContinuousEventTimeTrigger ...

  5. /var/spool/postfix

    centos磁盘优化,发现/var/spool/postfix/maildrop下有大量文件. cron进程默认会将计划任务中所运行的脚本的警告.错误信息或者脚本输出信息发送给计划任务的所有者,而由于 ...

  6. chrome浏览器调试JS代码

    是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这 ...

  7. 【Leetcode_easy】1030. Matrix Cells in Distance Order

    problem 1030. Matrix Cells in Distance Order 参考 1. Leetcode_easy_1030. Matrix Cells in Distance Orde ...

  8. 【JQuery】性能优化方法

    尽管JavaScript比JAVA C++慢很多,JQuery比原生Js还慢很多,但是我们通过良好的编程习惯还是能提高代码执行的效率. 一.选择器的使用 选择同一个元素,各种方法之间的性能是不一样的, ...

  9. vue 组件传值$attrs $listeners $bus provide/inject $parent/$children

    $attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...

  10. SpringBoot学习笔记:Redis缓存

    SpringBoot学习笔记:Redis缓存 关于Redis Redis是一个使用ANSI C语言编写的免费开源.支持网络.可基于内存亦可以持久化的日志型.键值数据库.其支持多种存储类型,包括Stri ...