This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging

In this article, we’ll look at the use of APIcomponent and Config and what we need to pay attention to.

The application of API

In Vue3, we can create an application instance with the createApp method as follows:

import { createApp } from 'vue'

const app = createApp({})
Copy the code

Since the createApp method returns the application instance itself, it can be followed by chaining calls to other methods, which are the application API.

component

Register or retrieve global components. There are two parameters:

  • {string} name
  • {Function | Object} [definition]

If definition is passed, the application instance is returned. Otherwise, the component definition is returned.

Suppose we register a component as follows:

app.component('my-component', {
    template: `<h1>hello world</h1>`
})
Copy the code

App.component (‘my-component’, {});} app.component(‘my-component’, {});

if (context.directives[name]) {
  warn(`Directive "${name}" has already been registered in target app.`);
}
Copy the code

A judgment is made in the source code and a warning message will appear if the component exists in the context.

It is worth noting that in real projects, we often use the single-file component.vue rather than the string template, which we need to control according to our own needs.

config

Each Vue application exposes a Config object that contains the configuration Settings for the application, whose property can be modified before mounting the application.

errorHandler

Specifies a handler to handle uncaught errors thrown during component rendering methods and listener execution. When this handler is called, it gets the error message and the application instance. The usage is as follows:

app.config.errorHandler = (err, vm, info) = > {
  // Error handling
  // 'info' is Vue specific error information, such as the lifecycle hook where the error is located
}
Copy the code

warnHandler

Specify a custom handler for Vue’s run-time warnings. Note that this only works in a development environment; it is ignored in a production environment.

app.config.warnHandler = function(msg, vm, trace) {
  // 'trace' is a component inheritance tracing
}
Copy the code

globalProperties

Add a global property that can be accessed from any component instance of the application. A component’s property takes precedence in naming conflicts.

app.config.globalProperties.foo = 'bar'

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'}})Copy the code

Here is worthy of our attention: the use of the app in Vue3. Config. GlobalProperties, and use in Vue2 Vue. The prototype.

isCustomElement

This method is used to identify custom elements defined outside of Vue (for example, using the Web Components API). If the component meets this criteria, no local or global registration is required, and Vue does not throw a warning about Unknown Custom Elements.

// Any element starting with "ion-" will be recognized as a custom element
app.config.isCustomElement = tag= > tag.startsWith('ion-')
Copy the code

optionMergeStrategies

Define merge policies for custom options.

app.config.optionMergeStrategies.hello = (parent, child, vm) = > {
  return `Hello, ${child}`
}

app.mixin({
  hello: 'Vue'
})
Copy the code

performance

Set to true to enable performance tracking for component initialization, compilation, rendering, and updates in the Performance/Timeline panel of the browser development tool. Only available in development mode and browsers that support the Performance. Mark API.

conclusion

  1. The Component method allows us to register global components, but we tend to use the single-file component.vue in real development.

  2. The application configuration in the Config object is rarely used in actual development. The most commonly used is globalProperties, where we can define a globally accessible property, such as a request method $HTTP.