Vue.js

# API de Aplicación

En Vue 3, las APIs que mutan globalmente el comportamiento de Vue son ahora movidos a la instancia de aplicación creada por el nuevo método createApp. Además, sus efectos son ahora limitados a la instancia de esa aplicación específica.

import { createApp } from 'vue'

const app = createApp({})
1
2
3

La invocación de createApp retorna una instancia de aplicación. Esta instancia proporciona un contexto de aplicación. El árbol completo de componentes montado por la instancia de aplicación comparte el mismo contexto, lo cual proporciona las configuraciones que antes fueron "global" en Vue 2.x.

Además, debido a que el método createApp retorna la instancia de aplicación misma, puede encadenar otros métodos después de el, los cuales se pueden encontrar en las secciones siguientes.

# component

  • Argumentos:

    • {string} name
    • {Function | Object} definition (opcional)

  • Retorna:

    • La instancia de la aplicación si un argumento definition fue pasado
    • La definición del componente si un argumento definition no fue pasado

  • Uso:

    Registrar o recuperar un componente global. La registración también automáticamente establece la name del componente con el parámetro name dado.

  • Ejemplo:

import { createApp } from 'vue'

const app = createApp({})

// registrar un objeto de opciones
app.component('my-component', {
  /* ... */
})

// recuperar un componente registrado
const MyComponent = app.component('my-component')
1
2
3
4
5
6
7
8
9
10
11

# config

  • Uso:

Un objeto que contiene las configuraciones de la aplicación.

  • Ejemplo:
import { createApp } from 'vue'
const app = createApp({})

app.config = {...}
1
2
3
4

# directive

  • Argumentos:

    • {string} name
    • {Function | Object} definition (opcional)

  • Retorna:

    • La instancia de aplicación si un argumento definition fue pasado
    • La definición de la directiva si un argumento definition no fue pasado

  • Uso:

    Registrar o recuperar una directiva global.

  • Ejemplo:

import { createApp } from 'vue'
const app = createApp({})

// registrar
app.directive('my-directive', {
  // Las directivas tienen un conjunto de hooks de ciclo de vida:
  // llamado antes de que se apliquen los atributos o escuchadores de evento del elemento vinculado
  created() {},
  // llamado antes de que se monte el componente padre del elemento vinculado
  beforeMount() {},
  // llamado cuando se monte el componente padre del elemento vinculado
  mounted() {},
  // llamado antes de que se actualice el VNode del componente que contenga el elemento
  beforeUpdate() {},
  // llamado después de que se hayan actualizado el VNode del componente que contenga el elemento y los VNodes de hijos de de dicho componente
  updated() {},
  // llamado antes de que se desmonte el componente padre del elemento vinculado
  beforeUnmount() {},
  // llamado cuando se desmonte el componente padre del elemento vinculado
  unmounted() {}
})

// registrar (directiva funcional)
app.directive('my-directive', () => {
  // este será llamado como `mounted` y `updated`
})

// captador, retorna la definición de la directiva si está registrada
const myDirective = app.directive('my-directive')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Se pasan estos argumentos a los hooks de directiva:

# el

El elemento al que está vinculada la directiva. Este puede ser utilizado para manipular el DOM directamente.

# binding

On objeto que contiene las propiedades siguientes.

  • instance: la instancia del componente dónde la directiva está utilizada.
  • value: El valor pasado a la directiva. Por ejemplo en v-my-directive="1 + 1", el valor sería 2.
  • oldValue: El valor anterior, solo disponible en beforeUpdate y updated. Es disponible sea o no que el valor haya cambiado.
  • arg: El argumento pasado a la directiva, si hay. Por ejemplo en v-my-directive:foo, el argumento sería "foo".
  • modifiers: Un objeto que contiene modificadores, si hay. Por ejemplo en v-my-directive.foo.bar, el objeto de modificadores sería { foo: true, bar: true }.
  • dir: un objeto, pasado como un parámetro cuando la directiva esté registrada. Por ejemplo, en la directiva
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})
1
2
3
4
5

dir sería el objeto siguiente:

{
  mounted(el) {
    el.focus()
  }
}
1
2
3
4
5

# vnode

Un plan del elemento DOM real recibido como un argumento arriba.

# prevNode

El nodo virtual anterior, solo disponible en los hooks beforeUpdate y updated.

Note

Aparte de el, debería tratar estos argumentos como de solo lectura y nunca modificarlos. Si necesita compartir información a través de hooks, es recomendado hacerlo mediante dataset (opens new window) del elemento.

# mixin

  • Argumentos:

    • {Object} mixin

  • Retorna:

    • La instancia de aplicación

  • Uso:

    Aplicar un mixin en el alcance entero de la aplicación. Una vez registrado se pueden utilizar en la plantilla de cualquier componente dentro de la aplicación actual. Este puede ser utilizado por los autores de plugins para inyectar comportamientos personalizados en componentes. No es recomendado en el código de aplicación.

  • Vea también: Mixin Global

# mount

  • Argumentos:

    • {Element | string} rootContainer
    • {boolean} isHydrate (opcional)

  • Retorna:

    • La instancia del componente raíz

  • Uso:

    El innerHTML del elemento DOM proporcionado será reemplazado con la plantilla renderizada del componente raíz de la aplicación.

  • Ejemplo:

<body>
  <div id="my-app"></div>
</body>
1
2
3
import { createApp } from 'vue'

const app = createApp({})
// Hacer algo de preparación necesario
app.mount('#my-app')
1
2
3
4
5

# provide

  • Argumentos:

    • {string | Symbol} key
    • value

  • Retorna:

    • La instancia de la aplicación

  • Uso:

    Establece un valor que pueda ser inyectado en todos componentes dentro de la aplicación. Los componentes deben utilizar inject para recibir los valores proporcionados.

    Desde una perspectiva de provide/inject, la aplicación puede ser tratado como el ancestro de nivel raíz, con el componente raíz como su único hijo.

    Este método no se debe confundir con la opción de componente provide o la función provide en la API de composición. Mientras estos son también un parte del mismo mecanismo de provide/inject, son utilizados para configurar valores proporcionados por un componente en vez de una aplicación.

    Proporcionar valores mediante la aplicación es específicamente útil cuando escribir plugins, como los plugins típicamente no serían capaz de proporcionar valores utilizando componentes. Es una alternativa para utilizar globalProperties.

    Note

    Las vinculaciones de provide y inject NO son reactivas. Este es a propósito. Sin embargo, si pasa un objeto reactivo abajo, las propiedades en ese objeto se mantienen reactivas.

  • Ejemplo:

    Inyectar una propiedad en el componente raíz, con un valor proporcionado por la aplicación:

import { createApp } from 'vue'

const app = createApp({
  inject: ['user'],
  template: `
    <div>
      {{ user }}
    </div>
  `
})

app.provide('user', 'administrator')
1
2
3
4
5
6
7
8
9
10
11
12

# unmount

  • Uso:

    Desmonta un componente raíz de la instancia de aplicación.

  • Ejemplo:

<body>
  <div id="my-app"></div>
</body>
1
2
3
import { createApp } from 'vue'

const app = createApp({})
// Hacer algo de preparación necesario
app.mount('#my-app')

// La aplicación será desmontada 5 segundos después de montarse
setTimeout(() => app.unmount(), 5000)
1
2
3
4
5
6
7
8

# use

  • Argumentos:

    • {Object | Function} plugin
    • ...options (opcional)

  • Retorna:

    • La instancia de aplicación

  • Uso:

    Instalar un plugin de Vue.js. Si el plugin es un objeto, debe exponer un método install, si es una función de sí mismo, será tratado como el método install.

    El método install será llamado con la aplicación como su primer argumento. Cualquieras options pasadas a use serán pasadas en argumentos posteriores.

    Cuando este método es llamado en el mismo plugin múltiples veces, el plugin solo se instala una vez.

  • Ejemplo:

    import { createApp } from 'vue'
import MyPlugin from './plugins/MyPlugin'

const app = createApp({})

app.use(MyPlugin)
app.mount('#app')
    1
    2
    3
    4
    5
    6
    7

  • Vea también: Plugins

# version

  • Uso:

    Proporciona el vesión de Vue instalado como una cadena de caracteres. Este es específicamente útil para plugins de la comunidad, dónde utilizaría estrategias diferentes para versiones distintos.

  • Ejemplo:

    export default {
  install(app) {
    const version = Number(app.version.split('.')[0])

    if (version < 3) {
      console.warn('Este plugin requiere Vue 3')
    }

    // ...
  }
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • Vea también: API Global - versión

← API Global →