手写Vue弹窗Modal的实现代码

dialog = null
}
}
}).$mount()
document.body.appendChild(vm.$el)
}

function success(msg) {
open('success', msg)
}

function fail(msg) {
open('fail', msg)
}

function info(msg) {
open('info', msg)
}

function warn(msg) {
open('warn', msg)
}

Vue.use(install)

export default install

可以看到close方法在这里被实现了，那么为什么要在原组件上面加上那些方法的定义呢？因为需要在模板上绑定，而模板是无法extend的，只能覆盖，如果要覆盖重新实现，那扩展的意义就不是很大了。其实这里只是一个消息弹窗组件,是可以在模板中就被实现,还有插件怎么注入，大家都可以自己抉择。

同时在使用extend的时候要注意:

方法和属性的定义是直接覆盖的
生命周期方法类似余mixin，会合并，也就是原组件和继承之后的组件都会被调用，原组件先调用

首先通过 let UiNotifier = Vue.extend(Notifier)，我们得到了一个类似于Vue的子类，接着就可以通过new UiNotifier({…options})的方式去创建Vue的实例了，同时通过该方式创建的实例，会有组件定义里面的所有属性。

在创建实例之后，vm.$mount()手动将组件挂载到DOM上面，这样我们可以不依赖Vue组件树来输出DOM片段，达到自由显示通知的效果。

扩展:

说一下$mount，我们也许很多项目的主文件是这样的

new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App)
})

其实el与$mount在使用效果上没有任何区别，都是为了将实例化后的vue挂载到指定的dom元素中。如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。值得注意的是如果$mount没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中，所以我上面写的你应该明白了吧！

这是$mount的一个源码片段,其实$mount的方法支持传入2个参数的，第一个是 el，它表示挂载的元素，可以是字符串，也可以是 DOM 对象，如果是字符串在浏览器环境下会调用 query 方法转换成 DOM 对象的。第二个参数是和服务端渲染相关，在浏览器环境下不需要传第二个参数。

好了，我们现在其实就可以在组件中:

this.notifier[state](msg)来调用了,是不是很方便？

进阶

我们刚才实现了在Vue中通过方法来进行用户反馈的提醒,再增加一个难度: