What did Vue. Use () do

vue.use() What did you do

• The js If it's an object

  • The object must have a install Method
  • Vue.use Is to call the inside install Method

• The js It's a function

  • Vue.use when function Will directly execute

• effect

  • Can be in Vue Add something to the prototype
  • Register global components, etc

• Use

  • take hellow Register as a global component
  • Add... To the prototype $num= 123

1. stay components New China components.js

import HelloWorld from '@/components/HelloWorld.vue'
export default {
  install: function (Vue) {
    //  there Vue You call install Method 
    //  Can be in Vue Add something to the prototype 
    Vue.prototype.$num = 123
    //  Registering global components 
    Vue.component(HelloWorld.name, HelloWorld)
  }
}
 Copy code 

2. stay main.js Call in

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 code 

3. Helloworld.vue

<template>
  <div> <h1> Here is HelloWord</h1> <h2>{{ $num }}</h2> </div>
</template>

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

<style></style>
 Copy code 

• The js When it's an object ,component.js It's written differently , The others are the same

Vue.use(VueRouter) That's how it works

export default function (Vue) {
  Vue.component(HelloWorld.name, HelloWorld)
  Vue.prototype.$num = 123
}
 Copy code 

  function install (Vue) {
    if (install.installed && _Vue === Vue) { return }
    install.installed = true;

    _Vue = Vue;

    var isDef = function (v) { return v !== 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 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 code 

The core is that the above two lines of code are in install method $router and route Mount to Vue On the prototype