import Vue from 'vue';
import { PopupManager } from 'vue-popup';
let MessageConstructor = Vue.extend(require('./main.vue'));

let instance;
let instances = []; // 存放当前未close的message
let seed = 1; // id叠加计数

var Message = function(options) {
  options = options || {};
  if (typeof options === 'string') { // 参数的兼容处理
    options = {
      message: options
    };
  }

  // this.$message({type: 'info',message: 'test',duration: 2000,onClose (vm){console.info(vm)}})
  let userOnClose = options.onClose; // 暂存用户传递的onclose回调
  let id = 'message_' + seed++; // 实例的标识

  options.onClose = function(vm) { // 重写options.onClose交由Message.close代理一层
    console.info(2)
    Message.close(id, userOnClose);
  };

  instance = new MessageConstructor({ // 创建message实例
    data: options
  });
  instance.id = id;
  instance.vm = instance.$mount(); // 在文档之外渲染
  document.body.appendChild(instance.vm.$el); // 挂载到body
  instance.vm.visible = true; // 设置data.visible为可见
  instance.dom = instance.vm.$el;
  instance.dom.style.zIndex = PopupManager.nextZIndex(); // css z-index层级叠加，覆盖之前已出现但还未close的message
  instances.push(instance);
  return instance.vm;
};

// 给Message增加四个直接调用的方法
// 支持this.$message.success('xxx')方式调用，等同于this.$message({type: 'success',message: 'xxx'})
['success', 'warning', 'info', 'error'].forEach(type => { 
  Message[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      };
    }
    options.type = type;
    return Message(options);
  };
});

// 组件的close方法中调用onClose再调该方法
Message.close = function(id, userOnClose) {
  console.info(3)
  for (let i = 0, len = instances.length; i < len; i++) {
    if (id === instances[i].id) { // 通过id找到该message实例
      if (typeof userOnClose === 'function') {
        userOnClose(instances[i]);
      }
      instances.splice(i, 1); // 移除message实例
      break;
    }
  }
};

export default Message;

<template>
  <transition name="el-message-fade">
    <p class="el-message" v-show="visible" @mouseenter="clearTimer" @mouseleave="startTimer">
      <!--<img class="el-message__icon" :src="typeImg" alt="">-->
      <p class="el-message__group">
        <p>{{ message }}</p>
        <p v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></p>
      </p>
    </p>
  </transition>
</template>

<script type="text/babel">
  export default {
    data() {
      return {
        visible: false,
        message: '',
        duration: 3000,
        type: 'info',
        onClose: null,
        showClose: false,
        closed: false,
        timer: null
      };
    },

    computed: {
      /*typeImg() {
        return require(`../assets/${ this.type }.svg`);
      }*/
    },

    watch: {
      closed(newVal) {
        if (newVal) {
          this.visible = false;
          this.$el.addEventListener('transitionend', this.destroyElement);
        }
      }
    },

    methods: {
      destroyElement() {
        this.$el.removeEventListener('transitionend', this.destroyElement);
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },

      close() {
        console.info(1)
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose(this);
        }
      },

      clearTimer() {
        clearTimeout(this.timer);
      },

      startTimer() {
        if (this.duration > 0) {
          this.timer = setTimeout(() => {
            if (!this.closed) {
              this.close();
            }
          }, this.duration);
        }
      }
    },

    mounted() {
      this.startTimer();
    }
  };
</script>

// main.vue
// ....
methods: {
      destroyElement() {
        this.$el.removeEventListener('transitionend', this.destroyElement);
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },

      close() {
        console.info(1)
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose(this);
        }
      },
  }
  ....

3点 调用message的时候对象里传了onClose就有
4点 用Message.close来代理处理Message.close
7点 为啥会有个Message，我也不太明白，我去掉以后，直接调onClose也没啥问题。可能是出于防止内存泄漏的原因，这里需要显式的干掉每次弹出Message创建的Instance。

谢邀，我还没有看过。。。
我给一个猜测吧，应该是什么去抖节流的方法