Vue3 createApp()Function

Vue3 全局 APIVue3 Global API

In Vue3,createApp()is a global function used to create a new Vue application instance.

createApp()is the starting point of a Vue application. All components, plugins, routes, etc. need to be registered and configured through this instance.

ThroughcreateApp(), you can easily create, configure, and manage Vue applications and mount them to DOM elements on the page.

Unlike that in Vue2new Vue(), Vue3 introducescreateApp()to create application instances, which makes Vue's API more modular and flexible.

The function syntax is as follows:

function createApp(rootComponent: Component, rootProps?: object): App

The first parameter is the root component. The second parameter is optional; it is the props to be passed to the root component.

createApp()Basic usage

To usecreateApp(), you first need to import it from the Vue library. Here is a simple example:

Example

// Import the createApp function from the Vue library
import { createApp } from 'vue';

// Create a root component
const App = {
  template: `<h1>Hello, Vue3!</h1>`
};

// Use createApp to create an application instance and mount it to a DOM element
const app = createApp(App);
app.mount('#app');

In this example, we firstvueimported from the librarycreateAppthe function. Then, we defined a simple root componentApp, which simply displays a title on the page. Next, we usecreateApp(App)to create a Vue application instance and mount it to the DOM element with IDappon the page.

createApp()Return value

createApp()The function returns an application instance object, which provides many methods and properties for configuring and managing the Vue application.

For example, you can use the.mount()method to mount the application to a DOM element, or use the.use()method to install plugins:

Example

const app = createApp(App);

// Install the Vue router plugin
app.use(router);

// Mount the application
app.mount('#app');

Why usecreateApp()？

createApp()In Vue3, it replaces the one in Vue2new Vue(), mainly for the following reasons:

  • Modular design：createApp()makes Vue's API more modular, allowing developers to import and use different features on demand.
  • Better isolation: Each application instance is independent, avoiding global pollution between multiple applications.
  • More flexible configuration：createApp()The returned application instance object provides more methods and options, making application configuration and management more flexible.

Application in real projects

In real projects,createApp()it is usually used to create the main instance of the application and register global components, plugins, routes, etc.

Here is a more complex example:

Example

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);

// Use router
app.use(router);

// Use state management
app.use(store);

// Register a global component
app.component('MyComponent', MyComponent);

// Mount the application
app.mount('#app');

In this example, we create a Vue application instance, install the router plugin and the state management plugin in turn, and register a global component. Finally, we mount the application to the#appelement on the page.

Vue3 全局 APIVue3 Global API

Other extensions