Vue3 API de Opciones

Las siguientes API se utilizan ampliamente en la API de Opciones de Vue para gestionar estado, ciclo de vida, slots, inyección de dependencias y otras funciones.

1. Opciones de Estado

N.º API y Descripción Ejemplo
1 data
La opción de datos del componente, utilizada para definir el estado del componente.		 data() { return { count: 0 }; }
2 props
La opción props del componente, define los datos que el componente padre transmite al componente hijo.		 props: { msg: String }
3 computed
Propiedad computada, utilizada para definir valores derivados basados en el estado del componente (data, props).		 computed: { doubledCount() { return this.count * 2; } }
4 methods
La opción methods del componente, utilizada para definir la lógica de negocio del componente.		 methods: { increment() { this.count += 1; } }
5 watch
Observa los cambios en los datos reactivos del componente y ejecuta callbacks.		 watch: { count(newVal) { console.log(newVal); } }
6 emits
Define eventos personalizados que el componente puede emitir.		 emits: ['update']
7 expose
Expone explícitamente propiedades o métodos para que el componente padre pueda acceder a ellos.		 expose() { return { method } }

2. Opciones de Renderizado

N.º API y Descripción Ejemplo
1 template
Define la plantilla HTML del componente.		 <template><button @click="increment">{{ count }}</button></template>
2 render
Utiliza una función de renderizado en lugar de la plantilla.		 render(h) { return h('button', { on: { click: this.increment } }, this.count) }
3 compilerOptions
Configura las opciones del compilador de plantillas.		 compilerOptions: { delimiters: ['{{', '}}'] }
4 slots
Define los slots del componente.		 <slot></slot>

3. Opciones de Ciclo de Vida

N.º API y Descripción Ejemplo
1 beforeCreate
Se llama antes de que el componente sea instanciado.		 beforeCreate() { console.log('Before Create') }
2 created
Se llama después de que se haya creado la instancia del componente y se hayan establecido los datos.		 created() { console.log('Created') }
3 beforeMount
Se llama antes de montar en el DOM, la plantilla ya ha sido compilada.		 beforeMount() { console.log('Before Mount') }
4 mounted
Se llama después de que el componente se haya montado en el DOM.		 mounted() { console.log('Mounted') }
5 beforeUpdate
Se llama después de que los datos cambien y antes de que el componente se vuelva a renderizar.		 beforeUpdate() { console.log('Before Update') }
6 updated
Se llama después de que se complete la actualización del componente.		 updated() { console.log('Updated') }
7 beforeUnmount
Se llama antes de que el componente sea desmontado.		 beforeUnmount() { console.log('Before Unmount') }
8 unmounted
Se llama después de que el componente sea desmontado.		 unmounted() { console.log('Unmounted') }
9 errorCaptured
Se llama al capturar errores de los componentes hijos.		 errorCaptured(err, vm, info) { console.error(err) }
10 renderTracked
Se llama cuando los datos reactivos cambian y se vuelve a renderizar.		 renderTracked(event) { console.log('Render Tracked') }
11 renderTriggered
Se llama cuando los datos reactivos desencadenan un re-renderizado.		 renderTriggered(event) { console.log('Render Triggered') }
12 activated
Se llama cuando el componente es activado (solo parakeep-alivecomponente).		 activated() { console.log('Activated') }
13 deactivated
Se llama cuando el componente es desactivado (solo parakeep-alivecomponente).		 deactivated() { console.log('Deactivated') }
14 serverPrefetch
Hook para obtener datos durante el renderizado en el servidor.		 serverPrefetch() { return fetchData() }

4. Opciones de Composición

N.º API y Descripción Ejemplo
1 provide
Proporciona dependencias a los componentes descendientes.		 provide('key', 'value')
2 inject
Inyecta dependencias desde los componentes ancestros.		 inject('key')
3 mixins
Introduce mixins externos para reutilizar lógica.		 mixins: [myMixin]
4 extends
El componente extiende las opciones de otro componente.		 extends: MyComponent

5. Otros Varios

N.º API y Descripción Ejemplo
1 name
El nombre del componente, generalmente utilizado para depuración.		 name: 'MyComponent'
2 inheritAttrs
Controla si los atributos (attrs) del componente padre se heredan automáticamente en el elemento raíz.		 inheritAttrs: false
3 components
Registra componentes locales para que puedan usarse en el componente actual.		 components: { LocalComponent }
4 directives
Registra directivas locales para que puedan usarse en el componente actual.		 directives: { focus: FocusDirective }

6. Instancia del Componente

N.º API y Descripción Ejemplo
1 $data
Obtiene el objeto de datos del componente.		 this.$data.count
2 $props
Obtiene el objeto props del componente.		 this.$props.msg
3 $el
Obtiene el elemento DOM donde está montado el componente.		 this.$el
4 $options
Obtiene las opciones de configuración del componente.		 this.$options.name
5 $parent
Obtiene la instancia del componente padre.		 this.$parent
6 $root
Obtiene la instancia del componente raíz.		 this.$root
7 $slots
Obtiene el contenido de los slots del componente.		 this.$slots.default
8 $refs
Obtiene el objeto de referencias del componente.		 this.$refs.input
9 $attrs
Obtiene todos los atributos no vinculados a los props del componente.		 this.$attrs
10 $watch()
Observa los datos reactivos o propiedades computadas de la instancia del componente.		 this.$watch('count', (newCount) => { console.log(newCount) })
11 $emit()
Emite un evento personalizado.		 this.$emit('update', newVal)
12 $forceUpdate()
Fuerza a Vue a volver a renderizar el componente.		 this.$forceUpdate()
13 $nextTick()
Ejecuta un callback después de que finalice el próximo ciclo de actualización del DOM.		 this.$nextTick(() => { console.log('DOM updated') })
Otras Extensiones