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标签(插槽)规定对应的内容放置在哪里,比如: ...
随机推荐
- openresty开发系列20--lua的时间操作
openresty开发系列20--lua的时间操作 在 Lua 中,函数 time.date 和 difftime 提供了所有的日期和时间功能.在 OpenResty 的世界里,不推荐使用这里的标准时 ...
- .frm文件怎么导入到数据库
如题想搞个私服游戏,但是数据库文件按文档的操作方法行不通.只能自行导入. 其实.frm文件就是mysql表结构文件,你拷贝data那一块的文件到你电脑安装的mysql的data文件下就行了. 一.首先 ...
- yii2 api接口 实现国际化多语言设置
1) 在 /config/main.php 下添加如下代码: 'components' => [ 'language' => 'zh-CN', 'i18n' => [ 'transl ...
- 123457123456#2#----com.MC.ShiZi365--前拼后广--儿童识字Game-mc22222222222222222
com.MC.ShiZi365--前拼后广--儿童识字Game-mc
- python flask框架学习——开启debug模式
学习自:知了课堂Python Flask框架——全栈开发 1.flask的几种debug模式的方法 # 1.app.run 传参debug=true app.run(debug=True) #2 设置 ...
- Java Audio : Playing PCM amplitude Array
转载自:http://ganeshtiwaridotcomdotnp.blogspot.com/2011/12/java-audio-playing-pcm-amplitude-array.html ...
- Python - Django - 封装分页成通用的模块
新建 utils 文件夹,并创建 page.py page.py: class ShowPage(object): def __init__(self, page_num, total_count, ...
- Linux虚拟机的命令分发工具。
deploy.sh工具的目的是,将一个文件,发送到其他服务器上面去. runRemoteCmd.sh工具的目的是,将一个命令,在多台服务器上执行. depoly.conf是上面两个工具的配置文件. d ...
- C++标准模板库STL算法与自适应容器(栈和队列)
参考<21天学通C++>第23与第24章节,对STL算法与自适应容器进行介绍. 实际上在前面的STL顺序容器.关联容器进行介绍时或多或少引用到了一些STL算法中的模板函数.而自适应容器是在 ...
- social engineering toolkit
1. freebuf介绍 http://www.freebuf.com/sectool/73409.html 2. github https://github.com/trustedsec/socia ...