Vue中config的配置详解

一、基本配置

1. devtools

{
  devtools: true  // 是否允许devtools检查代码
}

2. errorHandler

{
  errorHandler: (err, vm, info) => {
    console.error(err);  // 当捕获到一个全局错误时，执行此回调
  }
}

3. ignoredElements

{
  ignoredElements: ['my-custom-web-component']  // 组件中忽略的标签名
}

二、性能相关配置

1. silent

{
  silent: true  // 隐藏VueJS本身的一些警告和日志
}

2. performance

{
  performance: true  // 是否记录性能。生产环境下默认为true，开发环境下默认为false
}

3. productionTip

{
  productionTip: false  // 是否在启动时显示生产模式的提示信息
}

三、生命周期钩子

1. beforeCreate

在实例初始化之后，数据观测（data observer）和初始化事件（Events）之前被调用。

{
  beforeCreate:()=>{}
}

2. created

实例已经创建完成后调用。在这一步，实例已经完成数据观测（data observer），属性和方法的运算，初始化事件。

{
  created:()=>{}
}

3. beforeMount

在挂载之前调用，相关computed已经完成

{
  beforeMount:()=>{}
}

4. mounted

实例挂载完成后调用。

{
  mounted:()=>{}
}

5. beforeUpdate

数据更新时调用，例如在父组件中更新props时触发。

{
  beforeUpdate:()=>{}
}

6. updated

由于数据更改导致虚拟DOM重新渲染和打补丁后调用。

{
  updated:()=>{}
}

7. beforeDestroy

实例销毁之前调用，此时实例仍然完全可用。

{
  beforeDestroy:()=>{}
}

8. destroyed

实例销毁后调用。此时，所有事件监听器均已被删除。

{
  destroyed:()=>{}
}

四、路由相关配置

1. router

router属性是用于配置VueRouter实例的选项。只有在使用VueRouter时才应使用此选项。

{
  router: router,
  template: '<App/>'
}

2. routerPrefix

当使用带前缀的路由器时，设置routerPrefix选项可能很有用。

{
  router: router,
  routerPrefix: '/app',
  template: '<App/>'
}

3. useVueRouter

如果您想在没有Vue Router实例时禁用路由选项，则可以将useVueRouter设置为false。

{
  useVueRouter: false
}

五、全局API相关配置

1. globalProperties

添加全局属性，可以在所有组件中使用该属性，不需要手动导入。

{
  globalProperties: {
    $appVersion: '1.0.0'
  }
}

2. globalAPI

您可以使用config.globalAPI属性添加到Vue全局API。

{
  globalAPI: {
    $myGlobalAPI: {
      get() {
        return 'myGlobalAPI'
      }
    }
  }
}

3. performance

可以通过访问config.performance的render函数来获取渲染性能指标。这是在VueDevtools中使用的。

{
  performance: {
    maxEntries: 100,
    ignoreEntries: /^_/
  }
}

六、自定义选项

1.自定义选项1

在Vue实例化时，您可以传递属性。config.globalProperties属性可以包含一个对象，该对象可以在所有组件上应用属性。

const app = createApp({
  globalProperties: {
    $myCustomOption: 'Hello World'
  }
})

2. 自定义选项2

或者，在Vue实例化时，您可以在options对象中添加自定义选项。

const app = createApp({
  myCustomOption: 'Hello World'
})

3. 自定义选项3

您还可以自定义HTML标记。

{
    ignoredElements: ['my-custom-web-component']
}