vue2

Vue.use是Vue官方提供的插件安装机制。

语法

Vue.use( plugin插件 )

• 参数：

  • {Object | Function} plugin

    如果插件是一个对象，该对象必须提供 install 方法；

    如果插件是一个函数，它会被作为 install 方法；

• 注意

  install 方法调用时，会将 Vue 作为参数传入；

  当 install 方法被同一个插件多次调用，插件将只会被安装一次

使用

Vue.use使用时实际是调用了该插件的install方法!

举例说明-ElementUI引入

ElementUI插件含有install方法，所以我们在引入ElementUI时需要使用Vue.use去引入；

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)

举例说明-组件封装

编写组件通过vue.use()使用

• 组件-global.js

  import Icon from '../components/icon/index'
  const IconConponents = {
    install: function (Vue) {
      Vue.component('Icon', Icon)
    }
  }
  export default IconConponents
  

• main.js中

  import Vue from 'Vue'
  import Icon from './global'
  Vue.use(Icon)
  

  相当于-直接在main.js中

  import Vue from 'Vue'
  import Icon from '../components/icon/index'
  Vue.component('Icon', Icon)
  

  然后就可以全局使用Icon组件了

   <Icon type="arrow-left" color="red" size="28"></Icon>
  

Vue3

在Vue3中为了解决全局污染问题引入了应用实例这一概念，Vue.use这个全局API被移除了取而代之的是应用实例.use即app.use。

语法

app.use(plugin)

• 相同：与vue2相同，依然需要暴露一个install方法（若是plugin是一个对象该对象必须存在install属性属性值为一个函数；若是plugin是一个函数，该函数被当作install方法）

• 区别：

  在Vue3中install方法的第一个参数不再是Vue构造函数了，而是应用实例app;

  添加全局实例方法不再使用 Vue.prototype，而是使用 app.config.globalProperties

举例说明-组件封装

• 插件

  // 引入组件
  import HelloWorld from "@/components/HelloWorld.vue";
  
  // 封装插件
  const HComponent = {
    install(app){
      app.component('HelloWorld', HelloWorld)
    }
  }
  
  export default HComponent
  

• main.js中

  import HCom from './assets/HCom'
  const app = createApp(App)
  app.use(HCom)
  

总结