Vue.use()源码分析且执行后干什么了
直接开始分析源码
// 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()源码分析且执行后干什么了的更多相关文章
- 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标签(插槽)规定对应的内容放置在哪里,比如: ...
随机推荐
- Flutter 介绍、运行环境
Flutter 是谷歌公司开发的一款开源.免费的移动 UI 框架,可以让我们快速的在 Android 和iOS 上构建高质量 App.它最大的特点就是跨平台.以及高性能. Flutter 基于谷歌的 ...
- Python设计模式之MVC模式
# -*- coding: utf-8 -*- # author:baoshan quotes = ('A man is not complete until he is married. Then ...
- 004-行为型-03-观察者模式(Observer)
一.概述 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知它的依赖对象. 定义了对象之间的一对多依赖,让多个观察者对象同时监听某一 ...
- Linux的桌面虚拟化技术KVM(四)——虚拟机镜像格式对比与转换
Linux的桌面虚拟化技术KVM(一)——新建KVM虚拟机 Linux的桌面虚拟化技术KVM(二)——远程桌面管理 Linux的桌面虚拟化技术KVM(三)——KVM虚拟机克隆和快照 (1).常用镜像格 ...
- 宣化上人:大佛顶首楞严经四种清净明诲浅释(6-7)(转自学佛网:http://www.xuefo.net/nr/article23/230700.html)
大佛顶首楞严经四种清净明诲浅释(6) 唐天竺·沙门般剌密帝译 宣化上人主讲 一九八三年四月十七日晚讲于万佛圣城 是故阿难!若不断杀修禅定者,譬如有人,自塞其耳,高声大叫,求人不闻,此等名为欲隐弥露.清 ...
- 报错:java.lang.AbstractMethodError: nl.techop.kafka.KafkaHttpMetricsReporter.logger()Lcom/typesafe/scalalogging/Logger;
报错背景: CDH启动kafka的时候出现报错情况,并且报错的节点挂掉. 报错现象: Exiting Kafka due to fatal exception java.lang.AbstractMe ...
- maven command line specified settings.xml
1. using argument parameter --settings / or -s for shot mvn install --settings c:\user\settings.xml ...
- 利用VisualSVN修改配置库名称
相信大家都听说过SVN的大名,至于它的用途以及如何安装不在本文范围内,这里主要讲解如何利用VisualSVN来更改配置库的名称,前提是你的SVN服务必须用VisualSVN搭建,网上几乎没有这方面的文 ...
- Github克隆代码慢问题解决办法
参考:https://blog.csdn.net/stone8761/article/details/79072148 https://blog.csdn.net/github_37847975/ar ...
- HTML:给body增加全屏的背景图
只需要在head中增加如下代码即可 <head> {#设置背景#} <style> body { height: 100%;width: 100%; background: u ...