Vue.use()的用法和install的用法解析

下面详细讲解“Vue.use()的用法和install的用法解析”。

Vue.use()的用法

Vue.use(plugin: Object | Function)是Vue.js提供的一个全局API，它用于安装Vue.js插件。我们在开发中经常使用到第三方插件（如Vuex，VueRouter等），这些插件需要先安装，才能在Vue实例中使用。相应的，Vue.js提供了Vue.use方法完成插件的安装。

Vue.use接收一个参数，可以是对象或者函数。使用Vue.use(VueRouter)或Vue.use(Vuex)安装相应插件。

使用对象

使用对象方式安装插件时，可以在对象的定义中注入Vue实例，通过this访问Vue实例中的资源。

例如，针对一个时间戳的处理插件，在插件定义中需要使用Vue实例上的过滤器，代码如下：

let timestampPlugin = {
  install(Vue) {
    Vue.prototype.$formatTimeStamp = function(timestamp) {
      // 转化时间戳为指定格式的字符串
      //eg. 1479669190 -> '2016-11-21 19:39:50'
      return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}

// 安装插件
Vue.use(timestampPlugin)

// 使用插件中的方法
new Vue({
  el: '#app',
  created() {
    let timeStr = this.$formatTimeStamp(1546537541)
    console.log(timeStr) // 输出： '2019-01-03 23:32:21'
  }
})

使用函数

如果插件是一个导出为函数的模块，必须使用函数方式安装。函数会被作为install方法调用，接收Vue作为参数，可以将组件、指令、过滤器等注入到Vue实例中。

例如，下面是一个依赖于axios的http请求插件的示例：

import axios from 'axios'
let httpPlugin = function(Vue) {
  axios.defaults.baseURL = 'http://api.com'
  Vue.prototype.$http = axios
}

// 安装插件
Vue.use(httpPlugin)

// 使用插件中的方法
new Vue({
  el: '#app',
  created() {
    this.$http.get('/user/1')
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.error(err)
      })
  }
})

install的用法解析

Vue.js插件分为两类：全局组件和局部组件。Vue.js也提供了两种方式实现组件调用的统一性：使用Vue.component注册的全局组件和使用局部注册组件的方式。

Vue.js插件的install方法通常用于注册组件。

全局组件

全局组件是通过Vue.component方法注册，它在整个Vue实例范围内都可以使用。

// 注册全局组件
Vue.component('my-component', {
  template: '<div>全局组件</div>'
})

// 使用全局组件
new Vue({
  el: '#app',
  template: '<my-component></my-component>'
})

局部组件

局部组件通常在某个.vue单文件component中注册，只在定义的组件中有效。在使用Vue.component注册组件时，需要在调用时指定组件名称；而使用局部组件时，只需在定义时用components选项声明组件即可。

// 在某个.vue单文件component中注册
<template>
  <div>
    <button>Change Name</button>
    <child-component :name="name"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'parent-component',
  data() {
    return {
      name: 'Realworld'
    }
  },
  components: {
    'child-component': ChildComponent
  }
}
</script>

// 定义局部组件
<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  name: 'child-component',
  props: ['name']
}
</script>

install方法

install方法是插件的核心，它可以被用来实现各种组件、指令或者过滤器等的注册，实现插件的扩展能力。install方法应该在Vue实例创建前被执行。

export default function myPlugin(Vue) {
  Vue.component('my-component', {
    template: '<div>定义组件</div>'
  })
}

在插件定义中，需要实现一个install方法，该方法接受Vue构造函数作为唯一的参数，向Vue实例中添加组件、指令、过滤器等功能。

与Vue.use类似，Vue.component和Vue.directive也是通过install方法实现注册组件、指令的功能。

import MyComponent from './MyComponent.vue'

export default {
  install(Vue) {
    Vue.component('my-component', MyComponent)
  }
}

以上代码，使用Vue.component方法将MyComponent组件注册到Vue实例中。

import MyDirective from './MyDirective.js'

export default {
  install(Vue) {
    Vue.directive('my-directive', MyDirective)
  }
}

以上代码，使用Vue.directive方法将MyDirective组件注册成指令，它可以使用v-my-directive指令属性。

总结来说，Vue.use()提供了在Vue插件中安装组件、指令、过滤器等功能的扩展能力；而install方法是Vue插件重要的实现方式，可以通过install方法向Vue实例中注册组件、指令、过滤器等。