浅谈vue.use()方法从源码到使用


Posted in Javascript onMay 12, 2019

关于 vue.use 我们都知道些什么?

在做 vue 开发的时候大家一定经常接触 Vue.use() 方法,官网给出的解释是: 通过全局方法 Vue.use() 使用插件;我觉得把使用理解成注册更合适一些,首先看下面常见的注册场景。

import Router from 'vue-router'
Vue.use(Router)

import Vuex from 'vuex'
Vue.use(Vuex)

import Echarts from 'echarts'
Vue.prototype.$echarts = Echarts

关于 echarts 的注册很简单,直接挂在 Vue 方法的原型上,通过原型链继承的关系可以在任意一个组件里通过 this.$echarts 访问到 echarts 实例,我们来写一个简单的例子证明一下。

function myVue(title){
 this.title = title
}
myVue.prototype.myUse = '在原型上添加公共属性'
const A = new myVue('我是实例A')
const B = new myVue('我是实例B')
console.log(A.title, B.title, A.myVue, B.myVue, )
// 我是实例A 我是实例B 在原型上添加公共属性 在原型上添加公共属性

而 Router 和 Vuex 的注册就要去分析 Vue.use() 的源码了,在分析源码之前先总结一下官方对 Vue.use() 方法的说明:

  • 通过全局方法 Vue.use() 使用插件
  • Vue.use 会自动阻止多次注册相同插件
  • 它需要在你调用 new Vue() 启动应用之前完成
  • Vue.use() 方法至少传入一个参数,该参数类型必须是 Object 或 Function,如果是 Object 那么这个 Object 需要定义一个 install 方法,如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行,当 install 执行时第一个参数就是 Vue,其他参数是 Vue.use() 执行时传入的其他参数。

官网说 Vue.use() 是用来使用插件的,那么传入的 Router 和 Vuex 就是这里指的插件,而这个插件本质上又是一个 install 方法。至于 install 方法内部实现了什么逻辑就由插件自身的业务决定了。

源码分析

首先说一下 Flow,vue源码中那些奇怪的写法 Vue.use = function (plugin: Function | Object) 是 Flow 的语法,Flow 是 facebook 出品的 JavaScript 静态类型检查工具。JavaScript 是动态类型语言,它的灵活性有目共睹,但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码,在编译期甚至看上去都不会报错,但在运行阶段就可能出现各种奇怪的 bug。

下面我们正式开始分析源码,Vue.use() 的源码很简单30行都不到,首先看 src/core/global-api/use.js 下 Vue.use() 方法的定义:

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

上面源码中使用了工具函数 toArray ,该函数定义在 src/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.use = function (plugin: Function | Object) {

在全局api Vue 上定义了 use 方法,接收一个 plugin 参数可以是 Function 也可以是 Object,这就和前面官方规定的 Vue.use() 第一个参数要求的类型对应上了。

if (installedPlugins.indexOf(plugin) > -1) {

用来判断该插件是不是已经注册过,防止重复注册。

const args = toArray(arguments, 1)

arguments是 Vue.use() 方法的参数列表是一个类数组,后面的 1 先理解成一个常量,toArray 方法的作用就是把第一个 Array 参数从下标为1截取到最后。也就拿到了 Vue.use() 方法除去第一个之外的其他参数,这些参数准备在调用 instll 方法的时候传入。

if (typeof plugin.install === 'function') {
} else if (typeof plugin === 'function') {

这里的if语句是判断 Vue.use() 传入的第一个参数是 Object 还是 Function。

plugin.install.apply(plugin, args)
plugin.apply(null, args)

判断完之后执行那个对应的 install 方法,用 apply 改变 this 指向,并把 toArray 得到的剩余参数传入。

installedPlugins.push(plugin)

最后记录该组件已经注册过了

现在我们发现 Vue.use() 的注册本质上就是执行了一个 install 方法,install 里的内容由开发者自己定义,通俗讲就是一个钩子可能更贴近语义化而已。

Vue.use()有什么用

在 install 里我们可以拿到 Vue 那么和 Vue 相关的周边工作都可以考虑放在 Vue.use() 方法里,比如:

  • directive注册
  • mixin注册
  • filters注册
  • components注册
  • prototype挂载
  • ...

echarts 用 Vue.use() 来注册

main.js

import Vue from 'vue'
import echarts from './echarts.js'
Vue.use(echarts)

new Vue({
 ...
})

echarts.js

import Echarts from 'echarts'
export default {
 install(Vue){
  Vue.prototype.$echarts = Echarts
 }
}

这样写的好处是可以在 install 的文件里做更多配置相关的工作,main.js 不会变的臃肿,更方便管理。

全局组件用 Vue.use() 来注册

base.js

import a from './a'
import b from './b'
let components = { a, b }
const installBase = {
 install (Vue) {
  Object.keys(components).map(key => Vue.component(key, components[key]))
 }
}

main.js

import Vue from 'vue'
import base from './base.js'
Vue.use(base)

new Vue({
 ...
})

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

Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
js身份证验证超强脚本
Oct 26 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
javascript void(0)的妙用
Oct 21 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 #Javascript
微信小程序缓存过期时间的使用详情
May 12 #Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 #Javascript
Vue项目服务器部署之子目录部署方法
May 12 #Javascript
vue配置接口域名方法总结
May 12 #Javascript
详解babel升级到7.X采坑总结
May 12 #Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 #Javascript
You might like
PHP中GET变量的使用
2006/10/09 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
javascript 节点排序 2
2011/01/31 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
python检测远程端口是否打开的方法
2015/03/14 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
军训 自我鉴定
2014/02/03 职场文书
小学教师办公室制度
2014/02/03 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
2014年社区工作总结
2014/11/18 职场文书
经费申请报告范文
2015/05/18 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis