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

问题描述

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的内容，请自行寻找参考书。

看看插件源码就知道了