浅谈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 相关文章推荐
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
js中eval详解
2012/03/30 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
js随机生成一个验证码
2017/06/01 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python如何判断数独是否合法
2016/09/08 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
恶意软件的定义
2014/11/12 面试题
linux面试题参考答案(6)
2014/08/29 面试题
四群教育工作实施方案
2014/03/26 职场文书
企业年会主持词
2014/03/27 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
2015年话务员工作总结
2015/04/29 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫