What does vue.use() do

  • If the JS is an object

    • There should be an install method in this object
    • Vue.use calls the install method inside

  • This js is a function

    • When vue. use, function is executed directly

  • role

    • We can add something to the Vue prototype
    • Register global components and so on

  • use

    • Register Hellow as a global component
    • Add $num= 123 to the prototype
  1. Create components.js in Components
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  install: function (Vue) {
    // The Vue you passed when you called install
    // We can add something to the Vue prototype
    Vue.prototype.$num = 123
    // Register the global component
    Vue.component(HelloWorld.name, HelloWorld)
  }
}
Copy the code
  1. Called in main.js
import App from './App.vue' import components from '@/assets/components.js' Vue.use(components) Vue.config.productionTip  = false new Vue({ render: h => h(App) }).$mount('#app')Copy the code
  1. Helloworld.vue
<template>
  <div>
    <h1>Here is the HelloWord</h1>
    <h2>{{ $num }}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style></style>
Copy the code
  • Component.js is written differently when the js is an object, everything else is the same

Vue.use(VueRouter) is implemented this way

export default function (Vue) {
  Vue.component(HelloWorld.name, HelloWorld)
  Vue.prototype.$num = 123
}
Copy the code
  function install (Vue) {
    if (install.installed && _Vue === Vue) { return }
    install.installed = true;

    _Vue = Vue;

    var isDef = function (v) { returnv ! = =undefined; };

    var registerInstance = function (vm, callVal) {
      var i = vm.$options._parentVnode;
      if(isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) { i(vm, callVal); }}; Vue.mixin({beforeCreate: function beforeCreate () {
        if (isDef(this.$options.router)) {
          this._routerRoot = this;
          this._router = this.$options.router;
          this._router.init(this);
          Vue.util.defineReactive(this.'_route'.this._router.history.current);
        } else {
          this._routerRoot = (this.$parent && this.$parent._routerRoot) || this;
        }
        registerInstance(this.this);
      },
      destroyed: function destroyed () {
        registerInstance(this); }});Object.defineProperty(Vue.prototype, '$router', {
      get: function get () { return this._routerRoot._router }
    });

    Object.defineProperty(Vue.prototype, '$route', {
      get: function get () { return this._routerRoot._route }
    });

    Vue.component('RouterView', View);
    Vue.component('RouterLink', Link);

    var strats = Vue.config.optionMergeStrategies;
    // use the same hook merging strategy for route hooks
    strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created;
  }

Copy the code
Object.defineProperty(Vue.prototype, '$router', {
  get: function get () { return this._routerRoot._router }
});

Object.defineProperty(Vue.prototype, '$route', {
  get: function get () { return this._routerRoot._route }
});
Copy the code

At the heart of this is the above two lines of code that mount $Router and Route to the Vue prototype in the install method