vue push时对象错乱_谈谈Vue.use的原理

前言

❤️文章最后有福利哦！

使用过 Vue 的童鞋都见过这个 Vue.use() 的方法,但是有没有想过为什么这个方法需要这个方法来使用插件呢？ 官方 介绍有4中四种为Vue添加全局功能的方法:

1.添加全局方法或 property

Vue.myGlobalMethod = function () {
    // 逻辑...
  }
复制代码

2. 添加全局资源

Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
复制代码

3. 注入组件选项

Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
复制代码

4. 添加实例方法

Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
复制代码

注意事项

• 1.通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成
• 2. Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

源码

解读源码

这里的参数 plugin 是指的是我们的 插件 ,比如 ElementUI , Router 等,首先需要指出的是这里的 this 是 Vue 构造器如下图:

通过定义_installedPlugins对象如果之前注册过取之前注册过的_installedPlugins，否则是空数组。判断这个插件是否存在installedPlugins里面,如果存在结束，这就是为什么多次调用同一插件，插件只会注册一次的原因。如果不存在,我们需要把他push进去，这里再push之前做了参数处理。因为在使用Vue.use()的时候可以传入可选的选项对象。toArray

方法的作用是把类似数组的对象转化成真正的数组,源码如下图:

可能有人不明白为什么叫类似数组的对象呢？我们需要搞清楚 arguments 参数定义。 arguments 是一个对应于传递给函数的参数的类数组对象。

• args.unshift(this) 向前添加 this 到 args , 为什么要把这个 this 放到 args 的第一个位置上呢？ 这个就和 install 的传递的参数有关系了,第一个参数是 Vue构造器 第二个参数是一个 可选的选项options
• if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args); } else if (typeof plugin === 'function') { plugin.apply(null, args); } 这里可以看到参数 plugin 在封装的时候需要暴露一个 install 方法，或者自身是一个方法，不然是无法传递参数的

实战

新建 plugin.js 文件,创建 install 方法，我们把 clown 方法挂在 vue实例 上。

然后我们通过 Vue.use(Plugin) 使用,可以在 new Vue() 之后直接在this直接上调用。

调用结果如下:

如果本文对你有帮助的话可以点个『 赞』支持下哦 转发到您的朋友圈

作者：小丑同学

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

❤️福利

该怎么去面试大厂前端工程师？面试官都会这样问你？附答案​www.jianshu.com