解读Vue.use()源码

funnyZhang 发布于2019-08-23 11:42 / 3286人阅读

摘要：的作用官方文档的解释安装插件。下面展示源码源码中采用了的语法。语法，官方解释是简单的意思就是是代码的静态类型检查工具。官网链接使用的好处就是在编译期对代码变量做类型检查，缩短调试时间，减少因类型错误引起的。此时方法内的指向对象。

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 {
    start = start || 0
    let i = list.length - start
    const ret: Array = 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对象自身，扩展性更好。

GPU云服务器云服务器源码解读 webrtc源码解读 webrtc fec源码解读 js v8源码解读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97339.html

【前端词典】从源码解读 Vuex 注入 Vue 生命周期的过程

摘要：第一篇文章我会结合和的部分源码，来说明注入生命周期的过程。说到源码，其实没有想象的那么难。但是源码的调用树会复杂很多。应用的业务代码逐渐复杂，事件事件总线等通信的方式的弊端就会愈发明显。状态管理是组件解耦的重要手段。前言这篇文章是【前端词典】系列文章的第 13 篇文章，接下的 9 篇我会围绕着 Vue 展开，希望这 9 篇文章可以使大家加深对 Vue 的了解。当然这些文章的前提是默认你对 ...

Aklman 2019-05-21 16:00 评论0 收藏0
Vue源码解读(1)--src/core/index.js 入口文件

摘要：生产版本设为可以启用检查。只适用于开发模式和支持的浏览器上指定组件的渲染和观察期间未捕获错误的处理函数为的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。 Vue源码主入口:src/core/index.js import Vue from ./instance/index // 引用Vue构造器 import { initGlobalAPI }...

tangr206 2019-08-22 17:36 评论0 收藏0
vuex 2.0 源码解读

摘要：至此它便作为一个唯一数据源而存在。改变中的状态的唯一途径就是显式地提交。这样使得可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解应用背后的基本思想，借鉴了和参考源码解读一架构入门教程状态管理准备工作 1.下载安装运行这里以2.0.0-rc.6为例官网github下载链接(对应版本):https://github.com/vuejs/vuex...点击下载到本地 ...

yvonne 2019-08-23 12:21 评论0 收藏0
vuex 2.0源码解读（一）

摘要：简单点说，当你使用构造函数，它实际上做了这么几件事，首先定义给实例定义一些内部属性，之后就是绑定和的上下文对象永远是实例上，之后根据传入的充实内部状态等等。函数执行的结果是返回一个对象，属性名对应于传入的对象或者数组元素。转载请注明出处 https://segmentfault.com/a/11... vuex2.0 和 vuex1.x 相比，API改变的还是很多的，但基本思想没什么...

luqiuwen 2019-08-20 11:32 评论0 收藏0
Vue-Socket.io源码解读

摘要：删除时，就是取消监听该事件了，将赋值时压进回调数组的那个回调函数，删除，表示，我不监听了。这段代码先判断中是否之前已经存储过了该事件，如果没有，初始化该事件对应的值为空数组，然后将当前的回调函数，压进去，反之，直接压进去。背景有一个项目，今年12月份开始重构，项目涉及到了socket。但是socket用的是以前一个开发人员封装的包（这个一直被当前的成员吐槽为什么不用已经千锤百炼的轮...

Guakin_Huang 2019-08-22 11:21 评论0 收藏0