問題描述

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分別有什么區別啊？

問題解答

我來簡單解釋一下吧：

1 全局方法，即可以理解為 window. myGlobalMethod 一樣，通過 Vue.myGlobalMethod 來調用，就是一個定義在 Vue 下的靜態方法而已

2 全局資源，示例中即為定義了一個全局指令，具體可參考 vue 的自定義指令章節，并沒有什么不同，只是說在你的插件里還定義了一個指令。當然也可定義過濾器等操作，這全看你這個插件要做什么了

4 實例方法，回想一下 JS 里的類的概念，prototype 原型鏈的含義，沒搞明白的話先去看看這些基礎內容。這里可以這么給你解釋，實例方法可以在組件內部，通過 this.$myMethod 來調用

全局方法 = 類的靜態方法

全局資源 = 全局指令，就是類似于v-for的指令，不過是自定義的

全局實例方法 = 類的實例方法

第二點請直接看vue自定義指令的章節，1、3 是JavaScript的內容，請自行尋找參考書。

看看插件源碼就知道了