API global de Vue3

La API global de Vue3 es la siguiente:

N.º API y descripción Ejemplo
1 createApp()
Crea una instancia de la aplicación Vue, normalmente se utiliza para el renderizado del lado del cliente.		 const app = createApp(App)
2 createSSRApp()
Crea una instancia de la aplicación Vue para el renderizado del lado del servidor (SSR).		 const app = createSSRApp(App)
3 app.mount()
Monta la instancia de la aplicación Vue en el elemento DOM especificado.		 app.mount('#app')
4 app.unmount()
Desmonta la instancia de la aplicación Vue.		 app.unmount()
5 app.onUnmount()
Registra una función de devolución de llamada para cuando se desmonte la aplicación.		 app.onUnmount(() => { console.log('App is being unmounted') })
6 app.component()
Registra un componente global, de modo que el componente pueda utilizarse en cualquier lugar.		 app.component('MyComponent', MyComponent)
7 app.directive()
Registra una directiva global, permitiendo crear directivas personalizadas.		 app.directive('focus', { mounted(el) { el.focus() } })
8 app.use()
Instala un plugin, el cual puede proporcionar funcionalidades adicionales a la aplicación.		 app.use(SomePlugin)
9 app.mixin()
Registra un mixin global, proporcionando datos o métodos compartidos a todos los componentes.		 app.mixin({ methods: { globalMethod() { ... } } })
10 app.provide()
Proporciona dependencias a toda la aplicación, compartiendo datos entre componentes.		 app.provide('key', 'some value')
11 app.runWithContext()
Ejecuta una función en el contexto de la aplicación Vue, permitiendo acceder a los datos del contexto.		 app.runWithContext(() => { console.log('Running inside app context') })
12 app.version
Obtiene el número de versión actual de Vue.		 console.log(app.version)
13 app.config
Obtiene y establece la configuración global de la instancia de la aplicación.		 app.config.globalProperties.$myProperty = 'value'
14 app.config.errorHandler
Establece la función global de manejo de errores, que se activa cuando ocurre un error no capturado en la aplicación.		 app.config.errorHandler = (err, vm, info) => { console.error(err) }
15 app.config.warnHandler
Establece la función global de manejo de advertencias, que gestiona los mensajes de advertencia en la aplicación.		 app.config.warnHandler = (msg, vm, trace) => { console.warn(msg) }
16 app.config.performance
Activa el monitoreo de rendimiento, proporcionando datos de rendimiento del renderizado.		 app.config.performance = true
17 app.config.compilerOptions
Configura las opciones del compilador de plantillas, controlando el comportamiento de compilación de las plantillas.		 app.config.compilerOptions.delimiters = ['[[', ']]']
18 app.config.globalProperties
Establece propiedades globales, accesibles desde todos los componentes de la aplicación.		 app.config.globalProperties.$myGlobalProperty = 'value'
19 app.config.optionMergeStrategies
Define la estrategia de combinación de opciones de componentes, controlando cómo se combinan las opciones.		 app.config.optionMergeStrategies.methods = (parent, child) => { return { ...parent, ...child } }
20 app.config.idPrefix
Establece el prefijo del ID de la instancia de Vue, cuyo valor predeterminado es "vue-".		 `app.config.idPrefix = 'myApp-'
21 app.config.throwUnhandledErrorInProduction
Controla si se lanzan errores no manejados en el entorno de producción.		 app.config.throwUnhandledErrorInProduction = false
22 version
Obtiene el número de versión actual de Vue.		 console.log(Vue.version)
23 nextTick()
Ejecuta una devolución de llamada diferida después de que se complete la actualización del DOM, para manejar actualizaciones asíncronas del DOM.		 nextTick(() => { console.log('DOM updated') })
24 defineComponent()
Se utiliza para definir componentes, proporcionando inferencia de tipos y una sintaxis más concisa.		 export default defineComponent({ name: 'MyComponent' })
25 defineAsyncComponent()
Define un componente asíncrono, que se cargará de forma diferida (lazy) cuando sea necesario.		 const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

API de la instancia de la aplicación

1. createApp()

  • Función: Crea una instancia de la aplicación Vue.

  • Uso: createApp(rootComponent, rootProps)

  • Parámetros:

    • rootComponent: Componente raíz.

    • rootProps(Opcional): props pasadas al componente raíz.

Ejemplo

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

const app = createApp(App);

2. createSSRApp()

  • Función: Crea una instancia de la aplicación Vue para el renderizado del lado del servidor (SSR).

  • Uso: createSSRApp(rootComponent, rootProps)

  • Parámetros:

    • rootComponent: Componente raíz.

    • rootProps(Opcional): props pasadas al componente raíz.

Ejemplo

import { createSSRApp } from 'vue';
import App from './App.vue';

const app = createSSRApp(App);

3. app.mount()

  • Función: Monta la aplicación en un elemento DOM.

  • Uso: app.mount(container)

  • Parámetros:

    • container: Elemento DOM o selector (cadena).

Ejemplo

app.mount('#app');

4. app.unmount()

  • Función: Desmonta la instancia de la aplicación.

  • Uso: app.unmount()

Ejemplo

app.unmount();

5. app.onUnmount()

  • Función: Registra una función de devolución de llamada que se invoca cuando la aplicación se desmonta.

  • Uso: app.onUnmount(callback)

  • Parámetros:

    • callback: Función que se invoca al desmontar la aplicación.

Ejemplo

app.onUnmount(() => {
  console.log('App unmounted');
});

6. app.component()

  • Función: Registra u obtiene un componente global.

  • Uso:

    • Registrar:app.component(name, component)

    • Obtener:app.component(name)

  • Parámetros:

    • name: Nombre del componente.

    • component: Definición del componente.

Ejemplo

app.component('MyComponent', {
  template: '<div>My Component</div>'
});

7. app.directive()

  • Función: Registra u obtiene una directiva global.

  • Uso:

    • Registrar:app.directive(name, directive)

    • Obtener:app.directive(name)

  • Parámetros:

    • name: Nombre de la directiva.

    • directive: Definición de la directiva.

Ejemplo

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

8. app.use()

  • Función: Instala un plugin.

  • Uso: app.use(plugin, options)

  • Parámetros:

    • plugin: Plugin.

    • options(Opcional): Opciones del plugin.

Ejemplo

import MyPlugin from './MyPlugin';
app.use(MyPlugin);

9. app.mixin()

  • Función: Opciones de mixin global.

  • Uso: app.mixin(mixin)

  • Parámetros:

    • mixin: Objeto del mixin.

Ejemplo

app.mixin({
  created() {
    console.log('Global mixin created');
  }
});

10. app.provide()

  • Función: Proporciona dependencias globales.

  • Uso: app.provide(key, value)

  • Parámetros:

    • key: Nombre de la dependencia.

    • value: Valor de la dependencia.

Ejemplo

app.provide('theme', 'dark');

11. app.runWithContext()

  • Función: Ejecuta una función en el contexto de la aplicación actual.

  • Uso: app.runWithContext(fn)

  • Parámetros:

    • fn: Función a ejecutar.

Ejemplo

app.runWithContext(() => {
  console.log('Running with app context');
});

12. app.version

  • Función: Obtiene la versión de Vue.

  • Uso: app.version

Ejemplo

console.log(app.version);

13. app.config

  • Función: Objeto de configuración de la aplicación.

  • Uso: app.config

Ejemplo

app.config.errorHandler = (err) => {
  console.error(err);
};

14. app.config.errorHandler

  • Función: Función global de manejo de errores.

  • Uso: app.config.errorHandler = (err, vm, info) => {}

  • Parámetros:

    • err: Objeto de error.

    • vm: La instancia del componente donde se produjo el error.

    • info: Mensaje de error.

Ejemplo

app.config.errorHandler = (err) => {
  console.error('Global error:', err);
};

15. app.config.warnHandler

  • Función: Función global de manejo de advertencias.

  • Uso: app.config.warnHandler = (msg, vm, trace) => {}

  • Parámetros:

    • msg: Mensaje de advertencia.

    • vm: La instancia del componente donde se produjo la advertencia.

    • trace: Pila de advertencias.

Ejemplo

app.config.warnHandler = (msg) => {
  console.warn('Global warning:', msg);
};

16. app.config.performance

  • Función: Activa el seguimiento del rendimiento.

  • Uso: app.config.performance = true

Ejemplo

app.config.performance = true;

17. app.config.compilerOptions

  • Función: Configura las opciones del compilador de plantillas.

  • Uso: app.config.compilerOptions = { /* options */ }

Ejemplo

app.config.compilerOptions = { whitespace: 'preserve' };

18. app.config.globalProperties

  • Función: Agrega propiedades globales.

  • Uso: app.config.globalProperties[key] = value

Ejemplo

app.config.globalProperties.$myGlobal = 'Hello';

19. app.config.optionMergeStrategies

  • Función: Estrategia de combinación de opciones personalizadas.

  • Uso: app.config.optionMergeStrategies[key] = strategy

Ejemplo

app.config.optionMergeStrategies.customOption = (parent, child) => {
  return child || parent;
};

20. app.config.idPrefix

  • Función: Establece el prefijo del ID de los componentes.

  • Uso: app.config.idPrefix = 'my-app-'

Ejemplo

app.config.idPrefix = 'my-app-';

21. app.config.throwUnhandledErrorInProduction

  • Función: Lanza errores no manejados en el entorno de producción.

  • Uso: app.config.throwUnhandledErrorInProduction = true

Ejemplo

app.config.throwUnhandledErrorInProduction = true;

API general

1. version

  • Función: Obtiene la versión de Vue.

  • Uso: Vue.version

Ejemplo

console.log(Vue.version);

2. nextTick()

  • Función: Ejecuta la función de devolución de llamada después de que finalice el siguiente ciclo de actualización del DOM.

  • Uso: nextTick(callback)

  • Parámetros:

    • callback: Función de devolución de llamada.

Ejemplo

import { nextTick } from 'vue';
nextTick(() => {
  console.log('DOM updated');
});

3. defineComponent()

  • Función: Define un componente.

  • Uso: defineComponent(options)

  • Parámetros:

    • options: Opciones del componente.

Ejemplo

import { defineComponent } from 'vue';
const MyComponent = defineComponent({
  template: '<div>My Component</div>'
});

4. defineAsyncComponent()

  • Función: Define un componente asíncrono.

  • Uso: defineAsyncComponent(loader)

  • Parámetros:

    • loader: Función de carga asíncrona.

Ejemplo

import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
  import('./MyComponent.vue')
);
Otras extensiones