vue如何自定义插件

目录：

• 1、Vue key属性详解 &&自定义插件&&自定义指令
• 2、Vue设置自定义插件
• 3、开发Vue插件四种方式
• 4、Vue.js入门教程（十五）：如何创建自己的插件
• 5、20《Vue 入门教程》Vue 插件
• 6、vue插件的使用

Vue key属性详解 &&自定义插件&&自定义指令

不推荐使用index作为key，因为这种做**导致某些节点被 错误的原地复用 ，具体如下：

性能损耗 ：列表渲染时会导致变动项往后的所有列表节点（内容）的更新（相当于key没有发挥作用）

出现错误 ：某些节点在错误的位置被复用。（例如列表项中使用到复选框时）

定义 ：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

定义一个插件，插件就是将给Vue添加的全局成员，归类到一起去，这样做利于后期维护。

在src新建一个plugins文件夹，在新建一个index.js

Vue设置自定义插件

目录如图所示：

编辑message.js插件文件：

在main.js里面引入，然后use()方法即可

在组件中使用

结果如图所示

开发Vue插件四种方式

在 vuejs 源码 src/core/global-api/use.js 中可以阅读到 vuejs 插件需要 export 一个 install 函数。 vue 使用 indexOf 检测插件是否已注册，防止插件的重复注册。

一个指令定义对象可以提供如下几种钩子函数(都为可选)：

指令钩子函数会被传入以下参数：

上面说明文档是在 vuejs 官方文档教程中摘抄的，可以通过 这里 阅读而更多

vill-directive插件地址

vuejs 插件需要提供一个 install 函数向外暴露。在 src/directives/time 下的 index.js 中一共开发了三个不同关于 time 的指令 v-time 、 v-clock 、 v-down

v-time 获取一个传入的时间戳值 binding.value ，然后返回一个符合格式的 time 值

v-down 传入未来的一个时间戳，计算倒计时间。

getFormatTime 是 YYYY-MM-DD hh:mm:ss 时间格式的函数， computeTime 是计算传入时间与当前时间差值得格式时间。

通过 prototype 方式开发插件，是在 vue 的原型上添加属性或者方法。例如：

message插件地址

在 src/lib/vill-message 中的 index.js 中，定义了 vuejs 的 install 函数，主要是把方法和属性添加到 vue 的原型上。

Vue.extend 使用基础 Vue 构造器，创建一个“子类”。 options 是可以传入的参数配置。然后对数据进行手动挂载 $mount ，最后加入 document 文档中。

message 是传入的参数值，是提示的内容值； Icon 是一个图标组件。

Icon 图标组件采取的 render 函数进行渲染，根据传入的参数 success 、 error 、 warning 、 info ，直接渲染同名 SVG 图标(有点取巧)，这样避免 v-if 和 v-else 的多个条件判断的做法。

mixin 使用比较简单，可以定义常用 method 或者生命周期函数在 Minxin 中，然后混入各组件之中。

添加 vue 全局方法和属性开发 vue 插件跟 prototype 比较类似，差别只是在把属性或者方法绑定在 prototype 改成直接绑定在 vue 实例上。如下所示：

其他 message.vue 组件模板完全和 prototype 原型上一样。

Vue.js入门教程（十五）：如何创建自己的插件

通常，我们不会去接触vue底层的东西，又或者我们突发奇想需要自己创造一套框架。可回头看看我们使用最多的，其实还是插件。

插件，你也可以理解为就是一套方法的**，当我们需要调用它的时候，引入一下就行了。

举个例子，比如说，swiper和elementui。

一般来说，我们每个项目都会安装一大堆的插件。用于处理各种交互效果和逻辑，但是，网上能搜到了插件不一定能解决我们所有的问题。也就是说，我们剩下30%左右的逻辑部分是需要自己处理的，比如说，转化时间，处理字符串等等。

这些东西网上是没有现成插件的，需要我们自己来写。此时，如果你每一个组件里面都去定义方法就显得太low了。

我们需要自己写一个插件，事半功倍！

一般来说，我们自己的js通常会写成下面的两种形式：

第一种，声明多个方法。这个做法也叫函数声明，这样做的好处是，声明到全局，你只要引用了它，在页面任意地方都可以使用。但是同样的缺点也很明显，容易引起全局污染，浪费浏览器资源。而且当我方法多的时候，调用起来很不方便。

第二种，这是我们最长使用的声明方式，函数表达式。目的就是加载了这个js以后，当我需要使用的时候，直接调用str.xxx()，就可以返回我需要的内容了。并且，方法封装在变量内部，不会引起全局污染，也符合模块化的规则。

ok，ok。我们接下来，就要把我们自己的方法定义到vue上去使用。

我首先把js放到了项目文件夹中，然后在main.js中引入。

调用起来是完全没有问题的。

但是，又好像哪里不太对？是的，这样我们仅仅是引入了一个js，并没有把它形成一个js的插件。

我们来看看一个标准的js插件的调用形式：

为什么他这个可以直接从this上面调用？？？

个人理解他的方法应该是被定义到全局的vue对象上面了，这里的this应该指的就是vue本身！

如果你看过龙哥前面的教程，你应该知道，当我们引入的插件，是一个对象的时候，应该使用：

use方法，可以把一个符合vue标准的对象加载到vue本体上。

首先给我们的main.js下面增加一行。

然后打开我们自己的js文件，按照下面的方式书写：

最后在页面中调用的时候：

到此我们的插件已经跟vue融为一体！其实插件本身还支持更多参数和写法，请各位同学自行研究吧！

20《Vue 入门教程》Vue 插件

本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

通过全局方法 Vue.use () 使用插件。它需要在你调用 new Vue () 启动应用之前完成：

也可以传入一个可选的选项对象：

Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。 Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use ()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use ()：

awesome-vue **了大量由社区贡献的插件和库。

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

接下来，我们写一个具体的插件示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码第 3-20 行，我们定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。 JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。 HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。

本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点：

vue插件的使用

vue插件使用方式是Vue.use(xxx)，需要在new Vue实例之前加载，适合为Vue加入一些额外的通用功能。比如vuex，element-ui, axios都可以。

插件需要有install函数，然后就看自己发挥了。

Vue调用use的时候还可以传额外的自定义参数