Vue.use()源码分析且执行后干什么了
2019-08-14 10:15:23来源:博客园 阅读 ()
直接开始分析源码
// 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函数来处理。
原文链接:https://www.cnblogs.com/liumingwang/p/11212352.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Javascript判断图片尺寸大小实例分析 2019-12-06
- EChart绘制风速风向曲线分析图 2019-08-14
- Vue核心知识——computed和watch的细节全面分析 2019-08-14
- 弹窗组件的开发 2019-05-22
- 浅析libuv源码-node事件轮询解析(3) 2019-05-13
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash