Vue.use() 源码解析及使用

1、官方文档说明:https://cn.vuejs.org/v2/api/#Vue-use
Vue.use() 源码解析及使用_第1张图片

2、找到源码看
Vue.use(plugin)
这个plugin,要么是包含install方法的对象,要么本身就是一个函数。第一个参数始终是Vue对象。

function initUse (Vue) {
  Vue.use = function (plugin) {
    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    if (installedPlugins.indexOf(plugin) > -1) { // 判断插件有没有被注册
      return this
    }

    // additional parameters
    var args = toArray(arguments, 1);
    args.unshift(this); //this 指向 Vue 对象,所以数组参数第一个始终是vue对象
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args); // 整理好的数组参数传给install方法,this指向为plugin自己
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args); // plugin是函数的话 ,直接调用,传入参数。注意:其内this为null
    }
    installedPlugins.push(plugin); 
    return this
  };
}
/**
 * Convert an Array-like object to a real Array.
 */
function toArray (list, start) {
  start = start || 0;
  var i = list.length - start;
  var ret = new Array(i);
  while (i--) {
    ret[i] = list[i + start];
  }
  return ret
}

3、通过上面可知编写插件的两种方法,使用:
1)、包含install方法的对象(推荐),逻辑性比较强的比较适合, 编写灵活,拓展性也高, 最后通过install方法暴露给Vue对象

const plugin = {
    //this 指向plugin对象本身
    install() {
      // 巴拉巴拉一系列操作
      let conso = this.handleConsole() 
      console.log(this.handleConsole)
      console.log(conso)
      console.log(this.data)
    },
    handleConsole() {
      console.log('handleConsole');
      let comdata = '吃葡萄不吐葡萄皮'
      return comdata
    },
    data: [1,2,3]
}
export default plugin

浏览器打印:
Vue.use() 源码解析及使用_第2张图片

2)、一个函数,适合普通简单的

// 比如自定义全局组件,统一一个文件
// globalComponents.js
import Vue from 'vue';
import pHeader from './components/pheader'
import pFooter from './components/pfooter'
function plugin() {
    //this 为null
  Vue.component('pHeader', pHeader);
  Vue.component('pFooter', pFooter);
}
export default plugin

//使用 main.js
import Vue from 'vue'
import GlobalComponents from './globalComponents'
Vue.use(GlobalComponents);

// 然后就可以全局使用自定义的组件了。

4、还有个问题:
该方法需要在调用 new Vue() 之前被调用。那么为什么要在之前调用的?
简单的理解:如果在new Vue() 之后调用,那么你的插件的内容就来不及添加到Vue中。

你可能感兴趣的:(vue.js,前端,javascript)