javascript - vue.js插件中的全局方法，全局资源和实例方法区别是什么？

Question

http://cn.vuejs.org/v2/guide/...

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (options) {
    // 逻辑...
  }
}

这里面的1，2，4分别有什么区别啊？

Answer 1

我来简单解释一下吧：

1 全局方法，即可以理解为 window. myGlobalMethod 一样，通过 Vue.myGlobalMethod 来调用，就是一个定义在 Vue 下的静态方法而已

2 全局资源，示例中即为定义了一个全局指令，具体可参考 vue 的自定义指令章节，并没有什么不同，只是说在你的插件里还定义了一个指令。当然也可定义过滤器等操作，这全看你这个插件要做什么了

4 实例方法，回想一下 JS 里的类的概念，prototype 原型链的含义，没搞明白的话先去看看这些基础内容。
这里可以这么给你解释，实例方法可以在组件内部，通过 this.$myMethod 来调用

Answer 2

1. 全局方法 = 类的静态方法

2. 全局资源 = 全局指令，就是类似于v-for的指令，不过是自定义的

3. 全局实例方法 = 类的实例方法

第二点请直接看vue自定义指令的章节，1、3 是JavaScript的内容，请自行寻找参考书。

Answer 3

看看插件源码就知道了