Vue.use(js)

• 該js如果是對(duì)象
  • 該對(duì)象里面要有一個(gè)install方法
  • Vue.use就是調(diào)用里面的install方法
• 該js是一個(gè)function
  • Vue.use時(shí)function會(huì)直接執(zhí)行

作用：

• 可以在Vue的原型加一些東西
• 注冊(cè)全局組件等

使用

• 將hellow注冊(cè)為全局組件
• 在原型中添加$num= 123

1. 在components中新建components.js

import HelloWorld from '@/components/HelloWorld.vue'
export default {
  install: function (Vue) {
    // 這里的Vue就是你調(diào)用install方法時(shí)傳遞過(guò)來(lái)的
    // 可以在Vue原型中加一些東西
    Vue.prototype.$num = 123
    // 注冊(cè)全局組件
    Vue.component(HelloWorld.name, HelloWorld)
  }
}

2. 在main.js中調(diào)用

import Vue from 'vue'
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')

3. Helloworld.vue

<template>
  <div>
    <h1>這里是HelloWord</h1>
    <h2>{{ $num }}</h2>
  </div>
</template>

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

<style></style>

結(jié)果:

• 該js為對(duì)象時(shí)，component.js寫(xiě)法不一樣，其他均一樣

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

Vue.use(VueRouter)就是這么實(shí)現(xiàn)的

vue-router源碼

  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;
  }

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

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

其核心就是以上兩行代碼在install方法中將$router和route掛載到Vue原型上