Vue3应用API——use解析

---

一、app.use

1.使用场景

  不论是Vue2中的Vue.use亦或者Vue3中的app.use。其功能主要是用在插件的安装上，往往是在项目的入口文件（比如main.js）中。被use的插件多数是 NPM 中的第三方库 。在必要的时候，也可以封装一个自定义的插件以供团队的使用。这样可以避免反复开发同一个功能。

2.原理

  从Vue源码对 app.use 描述可以看出，app.use(plugin) 中的核心部分是 “plugin(app, …options)” 和 “plugin.install(app, …options)” 这两句；
  也就是说，app.use(plugin)，本质上就是把plugin中的 install 方法调用一遍；
  不仅如此，还可以发现 Vue 框架在 install 函数中暴露了 app实例, 所以在实际开发中能挂载到 app实例上的都可以在install函数中实现，然后通过app.use()将插件快速地应用到各个项目中；
  由此看来，我们也可以通过封装自定义插件供开发使用。

二、封装自定义插件

  一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身

1.写法一

拥有 install() 方法的对象

// 写法一：对象中定义 install 函数
let myPlugin = {
    install(app) {
        // 定义一个实例方法
        app.config.globalProperties.sayHello = function () {
            alert('Hello, Nancy!');
        }
        // 定义一个全局指令：元素挂载后"自动聚焦"及"动态绑定数据"
        app.directive('myModel', {
            mounted(el, binding) {
                el.focus();
                el.value = binding.value;
            },
        })
        // 定义一个全局按钮组件
        app.component('el-button', {
            name: "el-button",
            template: '<button value="按钮">ElementUI按钮</button>'
        })
    }
}
export default myPlugin;

2.写法二

直接是一个安装函数本身

// 写法二：直接定义 install 函数
let install = function (app, options) {
    // 定义一个实例方法
    app.config.globalProperties.sayHello = function () {
        alert('Hello, Nancy!');
    }
    // 定义一个全局指令：元素挂载后"自动聚焦"及"动态绑定数据"
    app.directive('myModel', {
        mounted(el, binding, vnode, prevNode) {
            el.focus();
            el.value = binding.value;
        },
    })
    // 定义一个全局按钮组件
    app.component('el-button', {
        name: "el-button",
        template: '<button value="按钮">ElementUI按钮</button>'
    })
}
export default install;

3.应用插件

应用自定义插件(main.js)

import myPlugin from './plugin/myPlugin';
// 自动调用插件 myPlugin 的 install 方法
app.use(myPlugin);

组件中测试

<template>
  <!-- 测试插件中定义的全局按钮组件和实例方法 -->
  <el-button @click="sayHello()"></el-button>
  <!-- 测试自定义指令 -->
  <input type="text" v-myModel="msg">
</template>

<script setup>
import { ref } from 'vue';
let msg = ref('测试v-myModel指令');
</script>

效果

4.注意事项

  注意：不要滥用插件，多个项目都需要使用时才抽离成一个Vue插件，然后封装成一个Npm包。

---

总结

  app.use 在 Vue 中的作用主要是帮助团队将一些在各个部门中都需要使用的公共的与业务无关的部分从现有业务中抽离出来，形成一个独立的和业务无关的第三方库，以便在下次项目中直接通过use使用。NPM上就有大量的第三方库或者组件等，例如moment、element-ui等都属于与业务无关但是又经常使用的公共部分，便可以采用这种方法引入。