• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • app.config

    每个应用程序实例都会公开一个config包含该应用程序配置设置的对象。您可以在安装应用程序之前修改其属性(如下所述)。

    import { createApp } from 'vue'
    
    const app = createApp(/* ... */)
    
    console.log(app.config)
    


    app.config.errorHandler

    为从应用程序内部传播的未捕获错误分配一个全局处理程序。

    类型

    interface AppConfig {
      errorHandler?: (
        err: unknown,
        instance: ComponentPublicInstance | null,
        // `info` is a Vue-specific error info,
        // e.g. which lifecycle hook the error was thrown in
        info: string
      ) => void
    }
    


    细节

    错误处理程序接收三个参数:错误、触发错误的组件实例和指定错误源类型的信息字符串。

    它可以从以下来源捕获错误:

    • 组件渲染
    • 事件处理程序
    • 生命周期钩子
    • setup()功能
    • 观察者
    • 自定义指令钩子
    • 过渡挂钩


    例子

    app.config.errorHandler = (err, instance, info) => {
      // handle error, e.g. report to a service
    }
    


    app.config.warnHandler

    为来自 Vue 的运行时警告分配一个自定义处理程序。

    类型

    interface AppConfig {
      warnHandler?: (
        msg: string,
        instance: ComponentPublicInstance | null,
        trace: string
      ) => void
    }
    


    细节

    警告处理程序接收警告消息作为第一个参数,源组件实例作为第二个参数,组件跟踪字符串作为第三个参数。

    它可用于过滤掉特定的警告以减少控制台的冗长。所有 Vue 警告都应在开发期间解决,因此仅建议在调试会话期间关注许多特定警告,并且应在调试完成后将其删除。

    提示:警告仅在开发期间有效,因此在生产模式下会忽略此配置。


    例子

    app.config.warnHandler = (msg, instance, trace) => {
      // `trace` is the component hierarchy trace
    }
    


    app.config.performance

    将此设置为 true 在浏览器开发工具性能/时间线面板中启用组件初始化、编译、渲染和修补性能跟踪。仅适用于开发模式和支持 performance.mark API 的浏览器。

    类型

    boolean
    


    app.config.compilerOptions

    配置运行时编译器选项。在此对象上设置的值将传递给浏览器内模板编译器,并影响已配置应用程序中的每个组件。请注意,您还可以使用选项在每个组件的基础上覆盖这些compilerOptions选项。

    此配置选项仅在使用完整版本(即vue.js可以在浏览器中编译模板的独立版本)时受到尊重。如果您在构建设置中使用仅运行时构建,则必须改为@vue/compiler-dom通过构建工具配置传递编译器选项。

    For vue-loader:通过compilerOptions加载器选项传递。另请参阅如何在vue-cli.
    对于vite:通过@vitejs/plugin-vue选项。


    app.compilerOptions.isCustomElement

    指定一个检查方法来识别本机自定义元素。

    类型

    (tag: string) => boolean
    


    细节

    如果标签应被视为本机自定义元素,则应返回true。对于匹配的标签,Vue 会将其呈现为原生元素,而不是尝试将其解析为 Vue 组件。

    本机 HTML 和 SVG 标签不需要在此函数中匹配- Vue 的解析器会自动识别它们。


    例子

    // treat all tags starting with 'ion-' as custom elements
    app.config.compilerOptions.isCustomElement = (tag) => {
      return tag.startsWith('ion-')
    }
    


    app.compilerOptions.whitespace

    调整模板空白处理行为。

    类型

    'condense' | 'preserve'
    

    默认:'condense'


    细节

    Vue 删除/压缩模板中的空白字符以产生更有效的编译输出。默认策略是“浓缩”,具有以下行为:

    1. 元素内的前导/结束空白字符被压缩成一个空格。
    2. 包含换行符的元素之间的空白字符被删除。
    3. 文本节点中连续的空白字符被压缩成一个空格。

    将此选项设置为'preserve'将禁用(2)和(3)。


    例子

    app.config.compilerOptions.whitespace = 'preserve'
    


    app.compilerOptions.delimiters

    调整用于模板内文本插值的分隔符。

    类型

    [string, string]
    

    默认:['{{','}}']


    细节

    这通常用于避免与也使用 mustache 语法的服务器端框架发生冲突。


    例子

    // Delimiters changed to ES6 template string style
    app.config.compilerOptions.delimiters = ['${', '}']
    


    app.compilerOptions.comments

    调整模板中 HTML 注释的处理方式。

    类型

    boolean

    默认: false


    细节

    默认情况下,Vue 会删除生产环境中的注释。将此选项设置为true将强制 Vue 即使在生产中也保留评论。在开发过程中始终保留注释。当 Vue 与其他依赖 HTML 注释的库一起使用时,通常会使用此选项。


    例子

    app.config.compilerOptions.comments = true
    


    app.config.globalProperties

    可用于注册全局属性的对象,可在应用程序内的任何组件实例上访问这些属性。

    类型

    interface AppConfig {
      globalProperties: Record<string, any>
    }
    


    细节

    Vue.prototype 这是 Vue 3中不再存在的 Vue 2 的替代品。与任何全局的东西一样,应该谨慎使用它。

    如果全局属性与组件自己的属性冲突,组件自己的属性将具有更高的优先级。

    用法

    app.config.globalProperties.msg = 'hello'
    

    这使得 msg 应用程序中的任何组件模板以及 this 任何组件实例中都可用:

    export default {
      mounted() {
        console.log(this.msg) // 'hello'
      }
    }
    


    app.config.optionMergeStrategies

    用于定义自定义组件选项的合并策略的对象。

    类型

    interface AppConfig {
      optionMergeStrategies: Record<string, OptionMergeFunction>
    }
    
    type OptionMergeFunction = (to: unknown, from: unknown) => any
    


    细节

    一些插件/库添加了对自定义组件选项的支持(通过注入全局混合)。当同一个选项需要从多个来源(例如 mixins 或组件继承)“合并”时,这些选项可能需要特殊的合并逻辑。

    合并策略函数可以通过 app.config.optionMergeStrategies 使用选项的名称作为键将其分配到对象上来为自定义选项注册。

    合并策略函数接收在父实例和子实例上定义的选项的值,分别作为第一个和第二个参数。


    例子

    const app = createApp({
      // option from self
      msg: 'Vue',
      // option from a mixin
      mixins: [
        {
          msg: 'Hello '
        }
      ],
      mounted() {
        // merged options exposed on this.$options
        console.log(this.$options.msg)
      }
    })
    
    // define a custom merge strategy for `msg`
    app.config.optionMergeStrategies.msg = (parent, child) => {
      return (parent || '') + (child || '')
    }
    
    app.mount('#app')
    // logs 'Hello Vue'
    

    上篇:createApp()