Vue 中 app.config 相关配置项介绍与案例

前端基地

于 2024-08-13 09:40:14 发布

阅读量1.1k

点赞数 15

分类专栏： Vue 3.0从入门到精通文章标签： vue.js javascript 前端 errorHandler app.config warnHandler performance

本文链接：https://blog.csdn.net/chinayun_6401/article/details/141152180

版权

app.config

app.config.errorHandler

app.config.warnHandler

app.config.performance

app.config.compilerOptions

app.config.globalProperties

app.config.optionMergeStrategies

app.config

在 Vue 3.0 中，每个应用实例都会展现出一个 config 对象，该对象涵盖了针对此应用的配置设定。您能够在挂载应用之前对这些属性予以更改。app.config 主要用于对 Vue 应用的全局选项进行配置。借助它，能够设定一些全局的行为和特性，比如错误处理、警告处理以及性能优化选项等等。在 Vue 2.0 中，相对应的是 Vue.config ，其功能和使用方法与 app.config 相仿，同样是用于设置全局的配置选项。

示例代码如下：

console.log(app.config);

运行结果：

app.config.errorHandler

在 Vue 3 中，app.config.errorHandler 用于定义全局的错误处理函数。当应用中的组件在运行时发生错误时，这个错误处理函数会被调用。它接收三个参数：错误对象 err 、当前组件实例 vm 和错误信息字符串 info 。在 Vue 2.0 中，对应的是 Vue.config.errorHandler ，功能和用法与 Vue 3 中的 app.config.errorHandler 类似。

示例代码如下：

<body>  
    <div id="app"></div>  
</body>  
<script>  
    const { createApp,reactive} = Vue;  
    // 创建一个全局的共享数据对象  
    const sharedData = reactive({  
        componentName: '',  
        errorMessage: '',  
        errorInfo: ''  
    });  
    const rootComponent = {  
        name:'componentName',  
        template: `  
            <div>  
                <p>Error in component:{
  { sharedData.componentName }}</p>  
                <p>Error message:{
  { sharedData.errorMessage }}</p>  
                <p>Error info:{
  { sharedData.errorInfo }}</p>  
            </div>  
        `,  
        methods: {  
            // 故意引发错误的方法:调用不存在的方法  
            errorMethod() {  
                this.nonExistentMethod();   
            }  
        },  
        mounted(){  
            this.errorMethod();  
        },  
        inject:['sharedData']  
    };  
    const app = createApp(rootComponent);  
    // 配置全局错误处理函数  
    app.config.errorHandler = (err, instance, info) => {  
        sharedData.componentName = instance.$options.name;  
        sharedData.errorMessage &#