vue组件和插件是实现

vue组件

countdown.vue
index.js

import countdown from './countdown.vue'

export {countdown}

从.vue文件直接引入组件，导出即可，组件就是一堆vue对象的options

vue插件

插件的方便之处，就是可以在install方法种执行任何动作，包括直接用 Vue.component 方法注册该组件为全局组件，use一次之后，无需在文件中引入，十分方便

一个toast组件是实现思路:

1. 从.vue文件直接引入组件对象
2. 用Vue.extend初始化该组件对象为一个Vue子构造函数
3. 合并和处理方法接收的选项参数
4. 在cache对象中，查找该toast，有就复用，没有就用前面的子构造函数新建
5. 通过$el属性判断是否已经渲染，没有渲染，就通过$mount方法在内存中渲染，使用appendChild添加到body中
6. 把进来的选项都加入到队列，方便处理多个实例的效果
7. 在Vue实例和Vue的prototype上分别添加全局和实例toast方法，如此可以全局或在组件中用this调用toast，弹出toast
8. 在全局和实例上，注册clearToast方法，方便在某些场合，移除单个或全部的toast，例如：在router-after的全局钩子中，
一旦页面切换，前一个页面的所有taost应该立即关闭，后续异步函数中的toast，也不应该再弹出。

import toast from './toast.vue'

export default {
  install(Vue, defaultOptions = {}) {
    const CONSTRUCTOR = Vue.extend(toast)
    const CACHE = {}
    Object.assign(toast.DEFAULT_OPT, defaultOptions)

    function toast() {
        const args = arguments,
              toString = Object.prototype.toString;
        options.msg = msg;
        let toast = CACHE[options.id] || (CACHE[options.id] = new CONSTRUCTOR)
        if (!toast.$el) {
            let vm = toast.$mount()
            document.querySelector(options.parent || 'body').appendChild(vm.$el)
        }
        options = assign({},toast.DEFAULT_OPT,options);
        //使用队列控制，toast多个实例弹出的效果，是覆盖，还是堆叠
        toast.queue.push(options)
    }
    Vue.toast = Vue.prototype.$toast = toast;
    Vue.clearToast = Vue.prototype.$clearToast = function(id){
        if(id) removeChild(id);
        else{
            Object.keys(CACHE).forEach(item => {
                removeChild(item);
            });
        }
    }
  }
}