实例教学如何写vue插件(2)

这里的逻辑大致可以分成这么几步：

创建一个空对象，这个对象就是日后要使用到的插件的名字。此外，这个对象中要有一个install的函数。使用vue的extend方法创建一个插件的构造函数（可以看做创建了一个vue的子类），实例化该子类，之后的所有操作都可以通过这个子类完成。之后再Vue的原型上添加一个共用的方法。

这里需要着重提的是Vue.extend()。举个例子，我们日常使用vue编写组件是这个样子的：

Vue.component('MyComponent',{
 template:'<div>这是组件</div>'
})

这是全局组件的注册方法，但其实这是一个语法糖，真正的运行过程是这样的：

let component = Vue.extend({
 template:'<div>这是组件</div>'
})

Vue.component('MyComponent',component)

Vue.extend会返回一个对象，按照大多数资料上提及的，也可以说是返回一个Vue的子类，既然是子类，就没有办法直接通过他使用Vue原型上的方法，所以需要new一个实例出来使用。

在代码里console.log(instance)

得出的是这样的结果：

可以看到$el:div.toast

也就是toast组件模板的根节点。

疑惑的是，我不知道为什么要创建一个空的div节点，并把这个实例挂载在上面。我尝试注释这段代码，但是运行会报错。

查找这个错误的原因，貌似是因为

document.body.appendChild(instance.$el)

这里面的instance.$el的问题，那好，我们console下这个看看。WTF！！！！结果居然是undefined。

那接着

console.log(instance)

和上一张图片比对一下，发现了什么？对，$el消失了，换句话说在我注释了

instance.$mount(document.createElement('div'))

这句话之后，挂载点也不存在了。接着我试着改了一下这句：

instance.$mount(instance.$el)

$el又神奇的回来了………………

暂时没有发现这种改动有什么问题，可以和上面一样运行。但无论如何，这也就是说instance实例必须挂载在一个节点上才能进行后续操作。

之后的代码就简单了，无非是在Vue的原型上添加一个改变插件状态的方法。之后导出这个对象。