Vue入坑史,插件系统详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue入坑史,插件系统详解相关的知识,希望对你有一定的参考价值。

参考技术A

在谈主题插件之前,我想先引出两个关于 Vue 的问题,这也是我存在的两个疑问,希望有人能够帮忙解答。

如果你比较心急,可以直接跳到 Vue.use源码解读

这两个是我最近在开发过程中遇到的问题,也没有找到相关的答案,希望有谁能够帮忙解答,在此先行谢过了。

Vue 的插件一般就是用来 扩展Vue的功能 。比如,当需要 Vue 实现 Ajax 请求功能,我们希望通过 this.$get(url) 的形式就可以发送一个 get 请求。那么,我们就需要给 Vue 的实例添加一个 $get 方法, Vue 实例本身是没有这个方法的。

Vue 的一些插件:

在创建 Vue 实例之前,通过全局方法 Vue.use() 来使用插件:

是不是很简单,好像也没有什么好说的。

有时候,我们看到某些插件使用起来可能有些不一样。比如使用 vuex :

其实本质上还是一样的,也是通过 Vue.use() 方法注册插件。只不过它有一个 store 对象,然后并将 store 对象作为 Vue 根实例的属性,以便组件通过 this.$store 这种形式来访问。

其实当通过 Vue.use() 注册插件时,内部会自动调用插件的 install() 方法。也就是说,插件必须要提供一个公开的 install() 方法,作为接口。该方法第一个参数是 Vue ,第二个参数是可选的 options 对象。

总结起来说,插件是一个对象。该对象要有一个公开的 install() 方法,那么写起来可能是这样的:

在 install() 方法中,我们通过参数可以拿到Vue对象,那么,我们就可以对它做很多事情。

这里直接就看几个插件的源码吧,看看他们是怎么写的,其实我也是参照了这些源码才真正弄明白了插件是怎么一回事。源码很长,这里只说一些关键点。

针对 vue-resource 插件问题,我查看了一下 vue 的源码,它的源码是这样的:

通过源码,我们知道, Vue插件可以是一个对象或者是一个函数 。只有当插件实现了 install 接口时(有 install 这个函数时),才会调用插件的 install 方法;否则再判断插件本身是否是一个函数,如果是,就直接调用它。

现在就能很好的解释 vue-resource 插件的写法了。好吧,我也是刚刚得知,又长了一点见识。

其实官网也有 说明 :

写一篇文章,对别人来说是一种分享,其实对自己来说更是一种提高。因为你要写好一篇文章,一方面你得尽量保证其正确性,有时候你不得不亲自去验证,另一方面也是对自己所学的知识进行一遍系统的复习和整理。

如果你有时间,我建议你多写一些技术类文章;如果你实在没时间写,那也要多读读别人写的文章。

以上是关于Vue入坑史,插件系统详解的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 插件开发详解

vue插件开发流程详解-从开发到发布至npm

vue-fullcalendar 用法详解 (vue 2.0的日历插件)

vue-router详解

四Vue之路由详解

Vue详解