Options API: data methods computed
Defina datos reactivos, escriba métodos llamados desde el template y use propiedades computed para valores derivados que se actualizan automáticamente.
Options API: data methods computed es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es la Options API?
La Options API organiza la lógica de los componentes por tipo de opción: data (estado reactivo), methods (funciones), computed (estado derivado), watch (efectos secundarios) y hooks del ciclo de vida. Cada elemento se incluye en una propiedad de objeto con nombre.
La opción data
Devuelve un objeto de propiedades reactivas. Todas las propiedades declaradas en data() son reactivas: Vue las observa y vuelve a renderizar la plantilla cuando cambian.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}La opción methods
Son funciones que se pueden llamar desde la plantilla o desde otros métodos. Dentro de los métodos, this hace referencia a la instancia del componente y proporciona acceso a las propiedades data y computed.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}La opción computed
Las propiedades computed derivan valores a partir de datos reactivos. Se almacenan en caché y solo se vuelven a calcular cuando cambian sus dependencias. Úselas en lugar de métodos para obtener valores derivados y evitar cálculos innecesarios.
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}Propiedades computed modificables
Una propiedad computed puede tener get y set para que sea modificable, lo que resulta útil para los enlaces bidireccionales con v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}La opción watch
Los watchers ejecutan efectos secundarios cuando cambia una propiedad reactiva. Úselos para operaciones asíncronas activadas por cambios en los datos, como realizar una solicitud cuando cambia un término de búsqueda.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Hooks del ciclo de vida en la Options API
Declare los hooks del ciclo de vida como métodos: created, mounted, updated y unmounted. created se ejecuta antes de que el DOM esté listo. mounted se ejecuta después de que el componente se incorpora al DOM.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Acceso a la plantilla: $refs
Agregue un atributo ref a un elemento de la plantilla y acceda al elemento del DOM o al componente secundario mediante this.$refs.name en los métodos. Está disponible después del montaje.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins frente a Composition API
La Options API tiene mixins para compartir lógica entre componentes. En gran medida, los composables han reemplazado a los mixins en la Composition API, ya que estos son más difíciles de analizar y pueden provocar colisiones de nombres. Prefiera la Composition API para el código nuevo.
Options API frente a Composition API
La Options API es excelente para componentes pequeños y medianos, y resulta más fácil de aprender para principiantes. La Composition API (setup() /