vue if判断_前端高手之路 从Vue源码看插件扩展 | 畅哥聊技术

点击右上角的关注，不定期前端干货分享！！

前端从jquery文明时代走进了Vue高速发展阶段。毫无疑问，不管是jquery还是vue对前端发展做出了不可磨灭的贡献。虽说两者并无比较的意义。但是他们都是伟大的框架，他们都有一个共有的特性。那就是可扩展。今天就来聊聊 从Vue源码看其插件是如何扩展的。

什么是Vue插件

正看此文的你可能不清楚vue的插件是什么！没关系给我10秒我来给你解释下。其实我们在实际的项目开发中已经用到了，比如vue-router，iview 、elementUI等，这些都是vue插件。他们都有一个特点，就是在import 进来以后需要Vue.use(Iview)。

阅读源码

我经常在悟空问答里面会回答一些有关前端发展方向的问题和评论其它前端作者的文章的时候，我一般都会建议前端在做Vue开发的时候一定要去阅读它的源代码。因为Vue的入门真的很简单。传统的Vue项目，普通的开发者阅读下文档就能上手。vue-cli脚手架已经非常的成熟了。我们甚至都不用做任何的配置就是初始化好一个Vue的项目。但是。你能做的别人都能做，那么你的竞争力在哪呢？所以我说阅读源代码是一个拉开距离很有效的措施。

那么接下来，跟我一起去看看Vue.use(plugin)到底做了什么事情吧。

1、首先我们找到Vue.use对应的源代码文件。对应的目录是 ：/vue/src/core/global-api/use.js

Vue.use = function (plugin: Function | Object) {}

先来看这一行，Vue.use方法的定义。这种写法看起来不是原生JS，没错，它就是用的typescript,很容易我们可以看出来，这个方法参数plugin可以是一个函数或者一个对象。这个很简单，接着往下走。

const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) if (installedPlugins.indexOf(plugin) > -1) { return this; }

Vue所用到的第三方插件全都会存储在Vue._installedPlugins 的数组里面。如果我们新添加的插件已经存在，则我们不作任何的处理并返回当前Vue对象。继续往下

const args = toArray(arguments, 1) args.unshift(this) if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this

我们优先来判断plugin.install方法是否存在，如果不存在再来判断plugin自身是否为function，然后调用plugin.install()方法，也就是说我们扩展插件的方法至少有三种。

1、类的静态方法

export default class Tap{ static install(){ ....dosomething }}

我们可以直接使用Tap.install方法。满足if条件里在的plugin.install = 'function'

2、对象的install方法

export default let Tap = { install(){ ....dosomething }}

3、自身就是一个方法

export default function Tap(){.. dosomething.}

接下来的关键，install方法里面会有参数，args作了处理，好像也不太明白，没关系，我们在install方法中打印一下arguments就知道了。

我们可以清楚的看到install方法的第一个参数就是我们的Vue类了。有了 Vue类，我们接下来可以愉快的写我们自己插件的逻辑了……

写在最后

任何牛X的框架原理都是有迹可寻的，一步一个脚印。每天进步一点点，做前端界最亮的仔。加油吧，骚年！！

(全文完)