浅谈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中:text选择器用法实例
Jan 03 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
vue中实现高德定位功能
Dec 03 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
PHP数据流应用的一个简单实例
2012/09/14 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python每天定时运行某程序代码
2019/08/16 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
金智子午JAVA面试题
2015/09/04 面试题
为什么要使用servlet
2016/01/17 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
教师考察材料范文
2014/06/03 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
新兵入伍心得体会
2014/09/04 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA