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

看看插件源碼就知道了