javascript - What is the difference between global methods, global resources and instance methods in vue.js plug-in?

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) {
    // 逻辑...
  }
}

What are the differences between 1, 2, and 4 here?

Answer 1

Let me explain it briefly:

1 Global method, which can be understood as window. myGlobalMethod 一样，通过 Vue.myGlobalMethod to call, is just a static method defined under Vue

2 Global resources. In the example, a global directive is defined. For details, please refer to the custom directive chapter of vue. There is no difference. It just means that a directive is also defined in your plug-in. Of course, you can also define filters and other operations. It all depends on what you want to do with this plug-in

4 Instance method, recall the concept of class in JS and the meaning of prototype prototype chain. If you don’t understand it, let’s take a look at these basic contents first.
Here I can explain it to you like this, instance methods can be called inside the component through this.$myMethod

Answer 2

1. Global method = static method of class

2. Global resources = global instructions, which are instructions similar to v-for, but customized

3. Global instance method = instance method of class

Second point, please look directly at the chapter of vue custom instructions. 1 and 3 are JavaScript content, please find the reference book by yourself.

Answer 3

Just take a look at the plug-in source code