Global functions and vars in Vue components system

There are several ways in Vue to manage global var and function in the component system:
1. Put all functions and vars in a js file like ‘helper.js’, and import this file in components where we need these functions and vars. It’s a very clear way because we can see directly where the functions and vars are from.
2. Add the function or var to Vue.prototype, like Vue.prototype.$myfunciotn = ... , and then we can use it in component by calling this.$myfunction()
3. Of course we can use Vue Plugins to inject these functions and vars. The official document is here.

MyPlugin.install = function (Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }
  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })
  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })
  // 4. add an instance method
  Vue.prototype.$myMethod = function (options) {
    // something logic ...
  }
}

We can then call Vue.use() to use this plugin

// calls `MyPlugin.install(Vue)`
Vue.use(MyPlugin)