Propiedades computadas en Laravel Livewire

▶

Una funcionalidad interesante en Livewire es el uso de las propiedades computadas. Estas no son más que funciones definidas en el componente con la estructura get<NombrePropiedad>Property, y se consumen simplemente accediendo a <nombrePropiedad>. La principal particularidad de estas propiedades es que son útiles para derivar valores desde la base de datos u otro almacenamiento persistente, como un caché.

app/Http/Livewire/Dashboard/Category/Index.php

public function getCategoryProperty()
   {
       if ($this->categoryToDelete)
           return Category::find($this->categoryToDelete->id);
       return "Sin categoría seleccionada";
   }

Para consumir esta propiedad desde la clase o la vista, siempre debes utilizar $this:

$this->category

Puedes mostrar el valor en la vista de la siguiente manera:

resources/views/livewire/dashboard/category/index.blade.php

"Sin categoría seleccionada"

También puedes declarar una propiedad computada usando el atributo #[Computed], como se muestra a continuación:

// function getCategoryProperty()
#[Computed()]
function category() {
 ***    
}

Vamos a implementar una propiedad computada que devuelva la hora actual y compararla con un método tradicional para entender mejor su comportamiento:

#[Computed()]
function getTimeP()
{
   sleep(1);
   return time();       
}
function getTime()
{
   sleep(1);
   return time();    
}
Y en la vista:

{{ $this->getTimeP }}
{{ $this->getTimeP }}
{{ $this->getTimeP }}
{{ $this->getTimeP }}
{{ $this->getTimeP }}
<br>
{{$this->getTime()}}
{{$this->getTime()}}

Cuando se utilizan propiedades computadas, el valor se cachea automáticamente. Por lo tanto, verás que, sin importar cuántas veces se invoque, getTimeP devolverá el mismo valor, por ejemplo:

1728727286 1728727286 1728727286 1728727286 1728727286

En cambio, el método tradicional getTime() se ejecutará cada vez, así que obtendrás:

1728727287 1728727288

Esto demuestra que las propiedades computadas almacenan en caché el resultado hasta que cambia alguna de las propiedades internas que afectan su resultado, o se actualiza explícitamente.

Ventajas de las Propiedades Computadas

Método con lógica personalizada: Puedes construir una propiedad que internamente haga operaciones complejas, como consultas a la base de datos o cálculos derivados.

Cacheo automático: Una vez calculado el valor, este se guarda internamente. No se vuelve a ejecutar el método salvo que se detecte un cambio en sus dependencias o se actualice explícitamente.

Esto es ideal para operaciones costosas o cuando quieres evitar llamadas repetidas a servicios externos o a la base de datos.

class ShowUser extends Component
{
    public $userId;
 
    #[Computed]
    public function user()
    {
        $key = 'user'.$this->getId();
        $seconds = 3600; // 1 hour...
 
        return Cache::remember($key, $seconds, function () {
            return User::find($this->userId);
        });
    }
 
    // ...
}
class ShowUser extends Component
{
    public $userId;
 
    #[Computed]
    public function user()
    {
        return User::find($this->userId);
    }
}

<h1>{{ $this->user->name }}</h1>