Vue.use()

vue.use()的作用:


官方文档的解释:

安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

vue.use()使用情景:


可以在项目中使用vue.use()全局注入一个插件,从而不需要在每个组件文件中import插件。例如:
不使用vue.use()注入插件:

const utils = require('./utils')
// 或者
import utils from './utils'

使用vue.use()注入插件,最典型的案例:

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

使用了vue.use()注册插件之后就可以在所有的vue文件中使用路由:
this.$route

vue.use()源码


下面切入本文的主题。我们知道了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
} // 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.use()源码中采用了flow的语法。flow语法,官方解释是:

Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale.

简单的意思就是flow是JavaScript代码的静态类型检查工具。官网链接
使用flow的好处就是:在编译期对js代码变量做类型检查,缩短调试时间, 减少因类型错误引起的bug。我们都知道js是解释执行语言,运行的时候才检查变量的类型,flow可以在编译阶段就对js进行类型检查。

下面将对vue.use()源码进行解读:

1、首先先判断插件plugin是否是对象或者函数:

Vue.use = function (plugin: Function | Object)

2、判断vue是否已经注册过这个插件

installedPlugins.indexOf(plugin) > -1

如果已经注册过,跳出方法

3、取vue.use参数。

const args = toArray(arguments, 1)

4、toArray()取参数
代码:

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
}

let i = list.length - start意思是vue.use()方法传入的参数,除第一个参数外(第一个参数是插件plugin),其他参数都存储到一个数组中,并且将vue对象插入到参数数组的第一位。最后参数数组就是[vue,arg1,arg2,...]

5、判断插件是否有install方法,如果有就执行install()方法。没有就直接把plugin当Install执行。

if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}

plugin.install.apply(plugin, args)将install方法绑定在plugin环境中执行,并且传入args参数数组进install方法。此时install方法内的this指向plugin对象。
plugin.apply(null, args) plugin内的this指向null.

最后告知vue该插件已经注册过installedPlugins.push(plugin)保证每个插件只会注册一次。

总结


使用vue.use()注册插件,插件可以是一个函数,可以是一个带有install属性的对象。不管是函数还是install方法,第一个参数总是vue对象。
个人还是喜欢使用将插件的功能方法写在install方法里。因为install内的this指向的是plugin对象自身,扩展性更好。

原文地址:https://segmentfault.com/a/1190000016256277?utm_source=tag-newest

相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时,就不需要用 Vue.use(axios),就能直接使用。那这是为什么呐?

答案
axios是第三方组件,不是vue自带组件,所以不能用Vue.use(axios)。

用 axios时,之所以不需要用 Vue.use(axios),就能直接使用,是因为在创建项目就的时候,我们就引入了axios,定义了它全局或者局部使用,所以可以直接使用。

作者:your_own_king
链接:https://www.jianshu.com/p/6b0b0a2d9332

解读Vue.use()源码的更多相关文章

  1. vue数据绑定源码

    思路分析 数据的双向绑定,就是数据变化了自动更新视图,视图变化了自动更新数据,实际上视图变化更新数据只要通过事件监听就可以实现了,并不是数据双向绑定的关键点.关键还是数据变化了驱动视图自动更新. 所有 ...

  2. vue.js源码精析

    MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...

  3. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

  4. vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码

    webpack+vue 2.0打包发布之后,将发布的文件部署到服务器中之后,浏览器中访问的时候会出现一个webpack文件夹,里边会显示vue文件源码 如果不想让vue源文件显示出来,可以在confi ...

  5. Vue.js源码——事件机制

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  6. 从Vue.js源码角度再看数据绑定

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  7. vue源码分析—Vue.js 源码构建

    Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...

  8. 2018-11-23 手工翻译Vue.js源码:尝试重命名标识符与文本

    续前文: 手工翻译Vue.js源码第一步:14个文件重命名 对core/instance/索引中的变量, 方法进行重命名如下(题图): import { 混入初始化 } from './初始化' im ...

  9. 【转】从Vue.js源码看异步更新DOM策略及nextTick

    在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...

随机推荐

  1. 数字证书注册审批机构(RA)

    1.证书注册审批机构 RA(Registration Authority),数字证书注册审批机构.RA系统是CA的证书发放.管理的延伸.它负责证书申请者的信息录入.审核以及证书发放等工作:同时,对发放 ...

  2. 通过自动回复机器人学Mybatis---加强版

    第2章 接口式编程 介绍 Mybatis 的接口式编程,并说明为什么要采用这种形式,以及 Mybatis 是如何实现的

  3. [ZJOI2019]语言——树剖+树上差分+线段树合并

    原题链接戳这儿 SOLUTION 考虑一种非常\(naive\)的统计方法,就是对于每一个点\(u\),我们维护它能到达的点集\(S_u\),最后答案就是\(\frac{\sum\limits_{i= ...

  4. 《Redis 设计与实现》读书笔记(三)

    多机数据库实现 十五 .复制 从服务器通过命令 slaveof 127.0.0.1 6000 成为主服务器的从服务器.然后执行复制操作,保持自己的状态和主服务器一样 1.理论 同步 成为从服务器后的同 ...

  5. vue-cli使用less

    vue-cli中使用less package.json 中添加 less,less-loader 之后不需要进行其他配置 在vue-cli构建的项目中 utils.js 已经帮我们引入了各种css编辑 ...

  6. printf:函数参数计算从右向左,从左向右?

    造冰箱的大熊猫@cnblogs 2019/8/3 1.问题 某天写了如下代码: unsigned char ReadByteFromFile ( FILE * fp ) { unsigned char ...

  7. HDU 5544 Ba Gua Zhen ( 2015 CCPC 南阳 C、DFS+时间戳搜独立回路、线性基 )

    题目链接 题意 : 给出一副简单图.要你找出一个回路.使得其路径上边权的异或和最大 分析 : 类似的题有 BZOJ 2115 对于这种异或最长路的题目(走过的边可以重复走) 答案必定是由一条简单路径( ...

  8. python国内镜像源

    让python pip使用国内镜像 国内源: 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pyp ...

  9. 2016 Multi-University Training Contest 1 部分题解

    第一场多校,出了一题,,没有挂零还算欣慰. 1001,求最小生成树和,确定了最小生成树后任意两点间的距离的最小数学期望.当时就有点矛盾,为什么是求最小的数学期望以及为什么题目给了每条边都不相等的条件. ...

  10. Android webView加载图片显示过大的问题

    webview的基本使用流程这里我就不重复说明了,本篇针对的是文章详情加载完成后出现的情况,这里我们使用的方法是:通过js脚本,重置img标签中图片的宽度和高度. 使用步骤: 1.此方法需要使用js, ...