vue引入插件时的挂载方式

这两天为项目引入了video.js，遇到了不少问题，不过就像是发现了一块大馅饼，里面值得琢磨的地方还挺多。

这篇文章主要总结了各种插件或组件挂载方式之不同。经验有限，先总结以下三种，或许今后还会遇到更多挂载方式。

框架中安装完插件后，就其挂载方式分为局部挂载和全局挂载，

局部挂载，顾名思义，即把安装好的插件引入某个有该功能需求的组件中来使用；

而全局挂载指的是把安装好的插件通过引入main.js,已达到整个项目中所有组件均可使用的目的。

 

比如，我们平时项目中必不可少的vue-router、使用的UI框架多是全局挂载，其挂载的方式：

这种方式从字面意思就可以理解，使用也最为普遍，不须多讲

然而，还有一种不通过Vue.use()来完成的全局挂载方式，那就是原型链挂载！

就拿video.js插件来举例：

首先，看一下main.js中的全局引入方式：

注意：这里区别于Vue.use,采用的挂载的方式是Vue.prototype

然后，具体到某个模块中使用时，也要多加留心：

既然$video已经挂载到vue原型链上，

那么在使用$video时，必须表明$video的对象vue,

所以上方截图处在插件初始化时使用了this.$video.

(这点当时参考网文复制粘贴时，后台不断报错提醒$video is not defined.后来经指点才醒悟过来，所以都是坑啊，一定要多加注意）

最后，为了清晰理解$video的最终归处，特地在钩子函数mounted中打印了this，我们可以从中发现VueComponent的原型链上多了一个$video的方法：

 

接下来，

换一种方式，如果video.js插件不采用全局引用，而选择局部引入，那么我把上面的代码略作更改，请留意代码前后之不同：

没有写vue.prototype.$video = video.js

初始化的时候，就用变量名videojs

这样就实现了某个组件的插件使用。

但有趣的地方在于：在某个组件中引入该插件，在没有写vue.prototype.$video = video.js的情况下，VueComponent的原型链上同样多了一个$video的方法！（不截图了，结果和上方的后台结果一致）

最后，要说的就是直接挂载到 new Vue中，比如通常我们在main.js中引入路由导航   import  router from './router'

在main.js的最后 的实例中挂载

这就是最后一种挂载方式了。

---

分析一下原理：参考文章https://blog.csdn.net/java_sparrow/article/details/80523711

Vue.use 

会自动阻止多次注册相同插件，届时只会注册一次该插件 
Vue 是可访问的全局变量时会自动调用 Vue.use()

Vue.prototype

定义的是原型,可以是用this.$xxx进行访问

 

归根结底：

不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式

非vue官方库不支持new Vue()方式

每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。

---

video.js在vue中的使用参考文章：https://www.jianshu.com/p/8b8023c7ed37