目录

一、理清思路

1、vue中的全局自定义函数 不等于 挂载到window下的全局函数

2、vue中全局自定义函数的主要方式

3、vue实例与js文件调用全局自定义函数的先后顺序不同

二、实现全局自定义函数的复用——ProvidePlugin方式

1、创建全局自定义js文件

2、在vue.config.js中配置ProvidePlugin

3、在实例和js中分别调用自定义全局函数

---

        vue3 cli 5.0.4前端项目中，有时需要将同一个自定义函数在不同场景反复调用。比如：一个格式化数据用的自定义函数，在多个vue页面中被使用，在router中间件里边也被使用，如何让自定义函数一次编写，到处复用？

一、理清思路

1、vue中的全局自定义函数 不等于 挂载到window下的全局函数

• 在原生JavaScript中，es5全局函数（全局变量）挂载到window下，es6使用块级作用域，全局函数和全局变量分别挂载到Script、Global下。
• vue开发使用的是es6，并且根据其单页面应用的特性，vue中的全局自定义函数并不等于原生JavaScript的全局函数，也不是window下的全局函数。

2、vue中全局自定义函数的主要方式

推荐方式：
        通过Vue3 cli 5.0.4(其他版本没有试)自带的webpack中的ProvidePlugin，ProvidePlugin在这里的作用是将自定义js文件自动import到所有实例和js中，再链式调用自定义js文件export出来的函数和变量。

不推荐：

• 在main.js中注册全局属性至app.config.globalProperties，虽然在实例中可通过this.属性名复用自定义函数。但是，在js文件中需要引入vue对象来访问globalProperties，容易引入不必要的数据，而且麻烦。
• 将自定义js文件直接import到需要调用的实例或js文件中，虽可以使用export出来的函数、变量，但也很麻烦。
• mixins混入、vx也可以间接实现全局函数，但是从项目维护的角度并不推荐。
• 在public/index.js中暴力引入script，极其不推荐，理由同上。

3、vue实例与js文件调用全局自定义函数的先后顺序不同

vue实例加载以后才能调用全局自定义函数，但js里(包括中间件的js)，比如router/index.html中的函数，在被import的时候就调用了。

所以，当情景涉及到实例与js的加载顺序，需要根据实际情况调整。

二、实现全局自定义函数的复用——ProvidePlugin方式

1、创建全局自定义js文件

        将需要复用的自定义函数写到js文件中，为了方便管理将此js放到专门的文件夹下，例如/src/globalFn/globalFn.js，并且将需要复用的函数export出来，这样内部函数才能在此js之外被调用，代码如下所示：

//创建文件/src/globalFn/globalFn.js
function fn(){
    console.log("fn run");
}

function formartData(){
    console.log("formartData run");
}

//将方法组合成一个对象，暴露出去
export default{
    fn,
    formartData
}

• 在ProvidePlugin添加全局函数时，export后边可以不跟default
• 在main.js中通过app.config.globalProperties注册全局属性时
  export 后边要跟 default，不然会报错

2、在vue.config.js中配置ProvidePlugin

        Vue3 cli 5.0.4(其他版本没有试)集成了webpack的基本功能（含ProvidePlugin），所以不需要另外下载webpack，如果你使用的vue脚手架没有自带必须的插件，需要根据具体情况安装配置，不赘述。

        问：为什么要配置vue.config.js，而不是配置webpack.config.js？

        答：首先在vue cli中集成的webpack，足够实现全局自定义函数，既然不必单独安装webpack，就按照vue默认的方式来管理webpack配置项，也就是vue.config.js。

        问：在vue中，什么情况下需要配置webpack.config.js？
        答：遇到实在需要单独安装webpack的时候，通过webpack.config.js管理单独安装的webpack配置项（此时不推荐）。

vue.config.js关键配置代码如下：

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
const path = require('path');

module.exports = defineConfig({

  //全局函数↓=====================================================
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        globalFnWP:[path.resolve(__dirname, './src/globalFn/globalFn.js')]
        //在不安装其他插件的前提下，此处设置的变量需要指向一个存在的js文件路径
        //也就是自定义函数所在的js文件，推荐使用resolve拼接本地路径和相对路径
      }),
    ],
  }
  //全局函数↑=====================================================

})

3、在实例和js中分别调用自定义全局函数

        在vue实例中调用全局自定义函数，例子如下：

export default {
  mounted() {
    globalFnWP.default.fn();    //并不限于mounted中使用，script标签中也可以使用
  }
};

        在js中调用全局自定义函数，代码如下：         

globalFnWP.default.fn();

问：实例与js中调用全局自定义函数的时候，在ProvidePlugin定义的变量名globalFnWP与自定义JS文件export出的函数fn()之间，为何要加上一层default呢？

答：可以这样理解：

• 自定义JS文件里，暴露函数写成export default，代码如下：

export default{//注意这里有个default
    fn,
    formartData
}

• 如果需要在main.js文件中注册全局属性，属性指向default这一层，在实例中调用自定义函数时，使用this.属性。而且，不写default会报错。
• 但是ProvidePlugin中，通过变量引入js，变量指向的是下图中的Module：
  
  上图中，default指向包裹着函数的对象，这种场景下default层是可以省的。
  
  更优雅一点的写法：去掉自定义JS文件中export default中的default，代码如下：

//在/src/globalFn/globalFn.js文件中
//去掉自定义export default中的default

export{
    fn,
    formartData
}

//在实例的script中，或js文件中更优雅地调用，去掉了default
globalFnWP.fn();