谈谈Vue.use的原理
前言
使用过Vue
的童鞋都见过这个Vue.use()
的方法,但是有没有想过为什么这个方法需要这个方法来使用插件呢?官方[1]介绍有4中四种为Vue添加全局功能的方法:
1.添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
注意事项
- 1.通过全局方法
Vue.use()
使用插件。它需要在你调用new Vue()
启动应用之前完成 - 2.
Vue.use
会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。
源码
解读源码
这里的参数plugin
是指的是我们的插件
,比如ElementUI
,Router
等,首先需要指出的是这里的this
是Vue
构造器如下图:
通过定义_installedPlugins
对象如果之前注册过取之前注册过的_installedPlugins
,否则是空数组。判断这个插件是否存在installedPlugins
里面,如果存在结束,这就是为什么多次调用同一插件,插件只会注册一次
的原因。如果不存在,我们需要把他push
进去,这里再push
之前做了参数
处理。因为在使用Vue.use()
的时候可以传入可选的选项对象
。toArray
方法的作用是把类似数组的对象转化成真正的数组,源码如下图:
可能有人不明白为什么叫类似数组的对象呢? 我们需要搞清楚arguments[2]参数定义。arguments
是一个对应于传递给函数的参数的类数组对象。
-
args.unshift(this)
向前添加this
到args
,为什么要把这个this
放到args
的第一个位置上呢? 这个就和install
的传递的参数有关系了,第一个参数是Vue构造器
第二个参数是一个可选的选项options
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
plugin.apply(null, args); }
这里可以看到参数plugin在封装的时候需要暴露一个install方法,或者自身是一个方法,不然是无法传递参数的
实战
新建plugin.js
文件,创建install
方法,我们把clown
方法挂在vue实例
上。
然后我们通过Vue.use(Plugin)
使用,可以在new Vue()
之后直接在this直接上调用。
调用结果如下:
参考资料
[1]Vue之插件: https://cn.vuejs.org/v2/guide/plugins.html
[2]arguments: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 关于Hibernate懒加载----Spring filter
- 十、详解函数柯里化
- Unable to load file:*struts.xml-[unknown location]
- 使用hooks重新定义antd pro想象力(一)
- 传智播客OA项目学习--阶段三(级联操作)
- 七日Python之路--第十一天
- 使用hooks重构antd pro的想象力(三)我是如何利用hooks干掉redux的
- 七日Python之路--第十天
- 初学Vue.js,用 vue ui 创建项目会不会被鄙视
- 十三、jQuery过时的今天,你还会使用它吗
- 0005 Java 包扫描实现和应用(Jar篇)
- python基础 -- acm
- 十四、深入核心,详解事件循环机制
- python基本 -- threading多线程模块的使用
- python基本 -- mysql 的使用