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标签(插槽)规定对应的内容放置在哪里,比如: ...
随机推荐
- Eclipse | 如何修改web项目的访问链接名,项目名
转: Eclipse | 如何修改web项目的访问链接名,项目名 2018-01-04 17:52:05 Mandsence 阅读数 2180更多 分类专栏: 其他 版权声明:本文为博主原创文章, ...
- c# list 使用Where()方法过滤数据
//根据任务id过滤数据 Func<RfidCodeResultDto, bool> expression = c => c.lineTaskId == _lineTaskId; r ...
- Spring cloud微服务安全实战-3-12session固定攻击防护
getSession这个方法里面的逻辑,会根据传过来的cookie里面带的JSessionID在你的服务器上去找一个session,如果能找到,就用这个已经存在的session,这个getSessio ...
- 【PHP】 php遍历文件夹文件,获取md5的值
方法: <?php //定义操作目录 $dir = 'D:\phpstudy\WWW\test'; function getDir2($dir) { foreach (glob($dir . ' ...
- hppts的理解
参考: https://www.ruanyifeng.com/blog/2014/02/ssl_tls.html
- 报错:HDFS IO error org.apache.hadoop.security.AccessControlException: Permission denied: user=root, access=WRITE, inode="/yk/dl/alarm_his":hdfs:supergroup:drwxr-xr-x
报错背景: CDH集成了Flume服务,准备通过Flume将kafka中的数据放到HDFS中, 启动Flume的时候报错. 报错现象: // :: INFO hdfs.HDFSDataStream: ...
- LINUX 安装 VMware-Tools(附常见问题)
mkdir /cdrom #创建光驱挂载目录 mount /dev/cdrom /cdrom # 加载光驱 tar -zxvf /cdro/VMwareTools**********.tar.gz ~ ...
- jquery获取复选框checkbox的值
jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...
- 【linux学习笔记五】帮助命令
man //查看ls作用 man ls man -f命令 相当于 whatis命令 --help ls --help help help shell help cd info详细命令帮助
- C# .NET WINFORM MUTEX 互斥
static class Program 里的全局变量: static System.Threading.Mutex appMutex; Main 方法里的内容: string exeName = & ...