Skip to content

Unidad 11: Propiedades Calculadas en Vue.js

Objetivo:

Aprender a usar las propiedades calculadas en Vue.js para manejar la lógica reactiva y optimizar el rendimiento de las aplicaciones.

11.1 Introducción a las Propiedades Calculadas

¿Qué son las propiedades calculadas?

Las propiedades calculadas son funciones que se definen dentro de un componente y que dependen de los datos reactivamente. Vue.js las recalcula solo cuando alguno de los datos de los que dependen cambia, lo que optimiza el rendimiento al evitar cálculos innecesarios.

En Vue.js, las propiedades Calculadas son similares a los getter de un objeto, pero permiten una mayor complejidad y dependen de la reactividad de Vue.

¿Por qué utilizar propiedades Calculadas?

✅ Mejora del rendimiento: Las propiedades Calculadas se recalculan solo cuando es necesario, lo que mejora la eficiencia.
✅ Lógica limpia: La lógica compleja se maneja dentro de las propiedades Calculadas, manteniendo el template limpio y entendible.

11.2 Sintaxis de las Propiedades Calculadas

Las propiedades Calculadas se definen dentro de la propiedad computed de un componente Vue.

Sintaxis básica de propiedad computada:

<template>
  <div>
    <h2>Mi Edad: {{ edad }}</h2>
    <button @click="cumplirAños">Cumplir años</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      edad: 30
    };
  },
  computed: {
    edadEn5Años() {
      return this.edad + 5;
    }
  },
  methods: {
    cumplirAños() {
      this.edad++;
    }
  }
};
</script>

📌 Explicación del código: - edadEn5Años: Es una propiedad computada que devuelve el valor de la edad sumada con 5. - cumplirAños: Es un método que incrementa la edad. - {{ edadEn5Años }}: Se muestra en el template, y se recalcula cada vez que se modifica edad.

11.3 Propiedades Calculadas vs Métodos

Diferencias clave:

Las propiedades Calculadas y los métodos pueden parecer similares, pero tienen diferencias clave:

  • Propiedades Calculadas: Son cacheadas y solo se recalculan cuando sus dependencias cambian. Son más eficientes para operaciones que dependen de datos reactivos.
  • Métodos: Se ejecutan cada vez que se llaman, no están cacheados.

Ejemplo comparativo: 

<template>
  <div>
    <h2>La raíz cuadrada de 16: {{ raizCuadrada }}</h2>
    <h2>La raíz cuadrada de 16 con método: {{ calcularRaizCuadrada() }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numero: 16
    };
  },
  computed: {
    raizCuadrada() {
      return Math.sqrt(this.numero);
    }
  },
  methods: {
    calcularRaizCuadrada() {
      return Math.sqrt(this.numero);
    }
  }
};
</script>

Explicación: - raizCuadrada: Es una propiedad computada que calcula la raíz cuadrada de numero solo cuando numero cambia. - calcularRaizCuadrada: Es un método que calcula la raíz cuadrada cada vez que se llama, incluso si numero no ha cambiado.

11.4 Propieiedades Calculadas en nuestra Aplicación

Añadiremos un contador que muestra el número de tareas completadas mediante una función de Vue llamada propiedades calculadas (computed properties). Estas funcionan de forma similar a los métodos, pero solo se vuelven a ejecutar cuando cambia una de sus dependencias.

Utilizando las propiedades Calculadas en Vue.js

El objetivo es añadir un resumen de nuestra lista de tareas pendientes. Esto puede ser útil para los usuarios, además de servir para etiquetar la lista para tecnología de asistencia. Si completamos 2 de 5 tareas en nuestra lista de tareas pendientes, nuestro resumen podría indicar "2 tareas completadas de 5". Aunque podría ser tentador hacer algo como esto:

1
2
3
4
<h2>
  {{ToDoItems.filter(item =&gt; item.done).length}} out of
  {{ToDoItems.length}} items completed
</h2>

Se recalcularía en cada renderizado. Para una aplicación pequeña como esta, esto probablemente no sea tan importante. Para aplicaciones más grandes, o cuando la expresión es más compleja, esto podría causar un grave problema de rendimiento.

Una mejor solución es usar las propiedades calculadas de Vue .Estas propiedades funcionan de forma similar a los métodos, pero solo se vuelven a ejecutar cuando cambia una de sus dependencias. En nuestro caso, esto solo se volvería a ejecutar cuando cambia el array ToDOItems.

Para crear una propiedad calculada, necesitamos agregar una propiedad computed a nuestro objeto componente, muy similar a la propiedad methods que usamos anteriormente.

Agrgar un contador de resumen

Agreguar el siguiente código a su objeto App de componente, debajo de la spropiedad methods. El método de resumen de lista obtendrá el número de elementos finalizados ToDoItems y devolverá una cadena que lo indica.

1
2
3
4
5
6
computed: {
  listSummary() {
    const numberFinishedItems = this.ToDoItems.filter((item) =>item.done).length
    return `${numberFinishedItems} out of ${this.ToDoItems.length} items completed`
  }
}

Ahora podemos agregar {{listSummary}} directamente a nuestra plantilla. Lo agregaremos dentro de un <h2>, justo encima de nuestro elemento <ul>. También agregaremos un atributo id y un atributo aria-labelledby para asignar el contenido como etiqueta al elemento <ul> .

Añade lo descrito <h2> y actualiza el interior de <ul> de tu ToDoList template de la siguiente manera:

1
2
3
4
5
6
7
8
9
<h2 id="list-summary">{{ listSummary }}</h2>
<ul aria-labelledby="list-summary" class="stack-large">
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item
      :label="item.label"
      :done="item.done"
      :id="item.id"></to-do-item>
  </li>
</ul>

Ahora deberías ver el resumen de la lista en tu aplicación, y el número total de elementos se actualiza a medida que añades más tareas pendientes. Sin embargo, si intentas marcar y desmarcar algunos elementos, descubrirás un error. Actualmente, no registramos los datos de tareas completadas, por lo que el número de tareas completadas no cambia.

Actualizar el estado de las tareas completadas

Podemos usar eventos para capturar la actualización de la casilla de verificación y administrar nuestra lista en consecuencia.

Dado que no dependemos de presionar un botón para activar el cambio, podemos adjuntar un controlador @change de eventos a cada casilla de verificación en lugar de usar v-model.

Actualice el elemento <input> de ToDoItem.vue para que se vea así:

1
2
3
4
5
6
<input
  type="checkbox"
  :id="id"
  :checked="done"
  @change="$emit('checkbox-changed')"
/>

Dado que todo lo que necesitamos hacer es emitir que la casilla de verificación está marcada, podemos incluirla $emit()en línea.

En ToDoList.vue, agregue un nuevo método llamado updateDoneStatus() debajo de su método addToDo(). Este método debe tomar un parámetro: el id del elemento de la lista de tareas . Queremos encontrar el elemento con la coincidencia id y actualizar su estado done para que sea el opuesto al actual:

1
2
3
4
updateDoneStatus(toDoId) {
  const toDoToUpdate = this.ToDoItems.find((item) => item.id === toDoId)
  toDoToUpdate.done = !toDoToUpdate.done
}

Queremos ejecutar este método cada vez que a ToDoItem emita un evento checkbox-changed y pasarlo item.id como parámetro. Actualice su <to-do-item></to-do-item> llamada de la siguiente manera:

1
2
3
4
5
6
<to-do-item
  :label="item.label"
  :done="item.done"
  :id="item.id"
  @checkbox-changed="updateDoneStatus(item.id)">
</to-do-item>

Ahora, si marcas a ToDoItem, ¡deberías ver el resumen actualizado apropiadamente!

Propiedades Calculadas en Vue.js

Resumen

En este tema, usamos una propiedad calculada para añadir una pequeña función a nuestra aplicación. Sin embargo, tenemos un objetivo más importante: en el próximo capítulo, analizaremos la representación condicional y cómo usarla para mostrar un formulario de edición al editar elementos de la lista de tareas.

11.5 Tarea Práctica: Implementación en el Proyecto del Blog

Objetivo: Usar propiedades Calculadas en el Blog para mostrar un filtro o información derivada de los datos.

Pasos a seguir:
1️⃣ Modificar BlogList.vue para mostrar solo las entradas no leídas.
2️⃣ Crear una propiedad computada para filtrar las entradas basadas en su estado de leídas.
3️⃣ Añadir una propiedad computada para mostrar el número total de entradas no leídas.

🔒 Solución del Blog (oculta inicialmente)

Código de BlogList.vue con propiedad computada para filtrar entradas no leídas:

BlogList.vue 
<template>
  <div class="container mt-4">
    <h2 class="text-center">Entradas No Leídas</h2>
    <ul>
      <li v-for="post in entradasNoLeidas" :key="post.id">
        {{ post.titulo }}
      </li>
    </ul>
    <p>Total entradas no leídas: {{ totalNoLeidas }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        { id: 1, titulo: 'Primer post', leido: false },
        { id: 2, titulo: 'Aprendiendo Vue', leido: true }
      ]
    };
  },
  computed: {
    entradasNoLeidas() {
      return this.posts.filter(post => !post.leido);
    },
    totalNoLeidas() {
      return this.posts.filter(post => !post.leido).length;
    }
  }
};
</script>

Este ejercicio permitirá a los alumnos utilizar propiedades Calculadas para manejar filtros y cálculos en su proyecto del Blog.