浅谈Vue.use的使用


Posted in Javascript onAugust 29, 2018

vue.use(plugin, arguments) 语法

参数:plugin(Function | Object)

用法:

如果vue安装的组件类型必须为Function或者是Object

如果是个对象,必须提供install方法

如果是一个函数,会被直接当作install函数执行

install函数接受参数,默认第一个参数为Vue,其后参数为注册组件时传入的arguments

先举个?

我们先来看一个简单的事例

首先我使用官方脚手架新建一个项目vue init webpack vue-demo

然后我创建两个文件index.js plugins.js.

我将这两个文件放置在src/classes/vue-use目录下

接下来对这两个文件进行编写

// 文件: src/classes/vue-use/plugins.js

const Plugin1 = {
  install(a, b, c) {
    console.log('Plugin1 第一个参数:', a);
    console.log('Plugin1 第二个参数:', b);
    console.log('Plugin1 第三个参数:', c);
  },
};

function Plugin2(a, b, c) {
  console.log('Plugin2 第一个参数:', a);
  console.log('Plugin2 第二个参数:', b);
  console.log('Plugin2 第三个参数:', c);
}

export { Plugin1, Plugin2 };
// 文件: src/classes/vue-use/index.js

import Vue from 'vue';

import { Plugin1, Plugin2 } from './plugins';

Vue.use(Plugin1, '参数1', '参数2');
Vue.use(Plugin2, '参数A', '参数B');

然后我们在入口文件main.js引用这段代码

// 文件: src/main.js

import Vue from 'vue';

import '@/classes/vue-use';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

此时我们执行npm run dev打开8080端口开启开发调试工具可以看到控制台输出以下信息

浅谈Vue.use的使用

...]

从中可以发现我们在plugin1中的install方法编写的三个console都打印出来,第一个打印出来的是Vue对象,第二个跟第三个是我们传入的两个参数。

而plugin2没有install方法,它本身就是一个方法,也能打印三个参数,第一个是Vue对象,第二个跟第三个也是我们传入的两个参数。

那么现在我们是不是大概对Vue.use有一个模糊的猜想~

分析源码

好我们还是不要猜想,直接上源码

// Vue源码文件路径:src/core/global-api/use.js

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
 Vue.use = function (plugin: Function | Object) {
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  if (installedPlugins.indexOf(plugin) > -1) {
   return this
  }

  // additional parameters
  const args = toArray(arguments, 1)
  args.unshift(this)
  if (typeof plugin.install === 'function') {
   plugin.install.apply(plugin, args)
  } else if (typeof plugin === 'function') {
   plugin.apply(null, args)
  }
  installedPlugins.push(plugin)
  return this
 }
}

从源码中我们可以发现vue首先判断这个插件是否被注册过,不允许重复注册。

并且接收的plugin参数的限制是Function | Object两种类型。

对于这两种类型有不同的处理。

首先将我们传入的参数整理成数组 => const args = toArray(arguments, 1)。

(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
}

再将Vue对象添加到这个数组的起始位置args.unshift(this),这里的this 指向Vue对象

如果我们传入的plugin(Vue.use的第一个参数)的install是一个方法。也就是说如果我们传入一个对象,对象中包含install方法,那么我们就调用这个plugin的install方法并将整理好的数组当成参数传入install方法中。 => plugin.install.apply(plugin, args)
如果我们传入的plugin就是一个函数,那么我们就直接调用这个函数并将整理好的数组当成参数传入。 => plugin.apply(null, args)
之后给这个插件添加至已经添加过的插件数组中,标示已经注册过 => installedPlugins.push(plugin)
最后返回Vue对象。

小结

通过以上分析我们可以知道,在我们以后编写插件的时候可以有两种方式。

一种是将这个插件的逻辑封装成一个对象最后将最后在install编写业务代码暴露给Vue对象。这样做的好处是可以添加任意参数在这个对象上方便将install函数封装得更加精简,可拓展性也比较高。

还有一种则是将所有逻辑都编写成一个函数暴露给Vue。

其实两种方法原理都一样,无非第二种就是将这个插件直接当成install函数来处理。

个人觉得第一种方式比较合理。

举个?

export const Plugin = {
  install(Vue) {
    Vue.component...
    Vue.mixins...
    Vue...
    // 我们也可以在install里面执行其他函数,Vue会将this指向我们的插件
    console.log(this) // {install: ...,utils: ...}
    this.utils(Vue)  // 执行utils函数
    console.log(this.COUNT) // 0
  },
  utils(Vue) {
    Vue...
    console.log(Vue) // Vue
  },
  COUNT: 0  
}
// 我们可以在这个对象上添加参数,最终Vue只会执行install方法,而其他方法可以作为封装install方法的辅助函数

const test = 'test'
export function Plugin2(Vue) {
  Vue...
  console.log(test) // 'test'
  // 注意如果插件编写成函数形式,那么Vue只会把this指向null,并不会指向这个函数
  console.log(this) // null
}
// 这种方式我们只能在一个函数中编写插件逻辑,可封装性就不是那么强了

小弟不才,对vue源码的理解暂且到这。欢迎大佬们多指教~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery客户端分页实例代码
Nov 18 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
Javascript基础之数组的使用
May 13 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
AJAX学习笔记
May 18 Javascript
JavaScript原型链详解
Nov 07 Javascript
微信小程序支付前端源码
Aug 29 #Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 #Javascript
javascript中UMD规范的代码推演
Aug 29 #Javascript
详解webpack自定义loader初探
Aug 29 #Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 #Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 #Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 #Javascript
You might like
实用函数3
2007/11/08 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
python实现停车管理系统
2018/11/30 Python
python获取本机所有IP地址的方法
2018/12/26 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python对象与引用的介绍
2019/01/24 Python
python3 enum模块的应用实例详解
2019/08/12 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
酒店销售经理岗位职责
2014/01/31 职场文书
英语辞职信范文
2015/02/28 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
总经理司机岗位职责
2015/04/10 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python