tangyuxian
文章71
标签34
分类5
vue-Vue.use()原理及使用

vue-Vue.use()原理及使用

vue.use 是用来使用插件的,我们可以在插件中扩展全局组件、指令、原型方法等。

总览

主要执行流程

1、检查插件是否注册,若已注册,则直接跳出;

2、处理入参,将第一个参数之后的参数归集,并在首部塞入 this 上下文;

3、执行注册方法,调用定义好的 install 方法,传入处理的参数,若没有 install 方法并且插件本身为 function 则直接进行注册;

注意

  1. 插件不能重复的加载:install 方法的第一个参数是vue的构造函数,其他参数是Vue.set中除了第一个参数的其他参数; 代码:args.unshift(this)

  2. 调用插件的install 方法 代码:typeof plugin.install === ‘function’

  3. 插件本身是一个函数,直接让函数执行。 代码:plugin.apply(null, args)

  4. 缓存插件。 代码:installedPlugins.push(plugin)

源码分析

源码地址

https://github.com/vuejs/vue/blob/dev/src/core/global-api/use.js

分析

1举例分析

创建两个文件

// plugins.js
const Plugin1 = {
  install(a,b){
    console.log('Plugin1 第一个参数:',a)
    console.log('Plugin1 第二个参数:',b)
  }
}

function Plugin2(a,b){
  console.log('Plugin2 第一个参数:',a)
  console.log('Plugin2 第二个参数:',b)
}

export{Plugin1,Plugin2}
// use.js 
import Vue from 'vue'
import {Plugin1,Plugin2} from './plugins'

Vue.use(Plugin1,'参数1')
Vue.use(Plugin2,'参数A')
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/plugins/use'

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

从中可以发现我们在 plugin1 中的 install 方法编写的两个 console 都打印出来,第一个打印出来的是Vue对象,第二个是我们传入的参数。
而 plugin2 没有 install 方法,它本身就是一个方法,也能打印两个参数,第一个是Vue对象,第二个是我们传入的参数。
那么现在我们是不是大概对Vue.use有一个模糊的猜想.

分析源码

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
}

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 首先判断这个插件是否被注册过,不允许重复注册,并且接收的 plugin 参数的限制是 Function | Object 两种类型。
对于这两种类型有不同的处理。
首先将我们传入的参数整理成数组: const args = toArray(arguments, 1);
再将 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 函数来处理。
个人觉得第一种方式比较合理。


参考文档:csdn上的文章:Vue中 Vue.use() 原理及使用

本文作者:tangyuxian
本文链接:https://www.tangyuxian.com/2021/02/22/%E5%89%8D%E7%AB%AF/vue/vue-Vue.use()%E5%8E%9F%E7%90%86%E5%8F%8A%E4%BD%BF%E7%94%A8/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可