Respuestas en streaming en Laravel: una guía para entregar datos de un modo eficiente

Propiedades computadas en Livewire

Publicado el 12 agosto, 2024
Palabras: 668
Tiempo de lectura: 3 minutos

Además de ofrecer ventajas de rendimiento, hay algunos otros escenarios en los que las propiedades computadas son útiles.

En concreto, al pasar datos a la plantilla Blade de su componente, hay algunas ocasiones en las que una propiedad computadas es una mejor alternativa. A continuación, se muestra un ejemplo del método render() de un componente simple que pasa una colección de posts a una plantilla Blade:

public function render()
{
    return view('livewire.show-posts', [
        'posts' => Post::all(),
    ]);
}

<div>
    @foreach ($posts as $post)
        <!-- ... -->
    @endforeach
</div>

Si bien esto es suficiente para la mayoría de los cosas, aquí hay tres escenarios en los que una propiedad computada sería una mejor alternativa:

#Acceso condicional a valores

Si para acceder de forma condicional a un valor que es “costoso” (en términos computacionales) recuperar en su plantilla Blade, puede reducir la sobrecarga de rendimiento utilizando una propiedad calculada.

Considerando la siguiente situación sin una propiedad calculada:

<div>
    @if (Auth::user()->can_see_posts)
        @foreach ($posts as $post)
            <!-- ... -->
        @endforeach
    @endif
</div>

Si a un usuario se le restringe la visualización de publicaciones, la consulta a la base de datos para recuperar las publicaciones ya se realizó, pero las publicaciones nunca se utilizan en la plantilla.

A continuación, se muestra una versión del escenario anterior que utiliza una propiedad calculada en su lugar:

use LivewireAttributesComputed;
use AppModelsPost;
 
#[Computed]
public function posts()
{
    return Post::all();
}
 
public function render()
{
    return view('livewire.show-posts');
}

<div>
    @if (Auth::user()->can_see_posts)
        @foreach ($this->posts as $post)
            <!-- ... -->
        @endforeach
    @endif
</div>

Ahora, debido a que proporcionamos las publicaciones a la plantilla usando una propiedad computada, solo ejecutamos la consulta de la base de datos cuando se necesitan los datos.

#Usando inline templates

Otro escenario en el que las propiedades computadas son útiles es el uso de plantillas inline en el componente.

A continuación, se muestra un ejemplo de un componente inline en el que, debido a que estamos devolviendo una cadena de plantilla directamente dentro de render(), nunca tenemos la oportunidad de pasar datos a la vista:

<?php
 
use LivewireAttributesComputed;
use LivewireComponent;
use AppModelsPost;
 
class ShowPosts extends Component
{
    #[Computed]
    public function posts()
    {
        return Post::all();
    }
 
    public function render()
    {
        return <<<HTML
        <div>
            @foreach ($this->posts as $post)
                <!-- ... -->
            @endforeach
        </div>
        HTML;
    }
}

En el ejemplo anterior, sin una propiedad computada, no tendríamos forma de pasar datos explícitamente a la plantilla Blade.

#Omitir el método render

En Livewire, otra forma de reducir el código repetitivo en sus componentes es omitir por completo el método render(). Cuando se omite, Livewire utilizará su propio método render() que devolverá la vista Blade correspondiente por convención.

En estos casos, obviamente no tiene un método render() desde el cual pueda pasar datos a una vista Blade.

En lugar de volver a introducir el método render() en su componente, puede proporcionar esos datos a la vista a través de propiedades computadas:

<?php
 
use LivewireAttributesComputed;
use LivewireComponent;
use AppModelsPost;
 
class ShowPosts extends Component
{
    #[Computed]
    public function posts()
    {
        return Post::all();
    }
}

<div>
    @foreach ($this->posts as $post)
        <!-- ... -->
    @endforeach
</div>

Antonio Jenaro

Web Developer

Archivado en:

#Laravel

#Livewire

Fuente: Livewire documentation

Inicia la conversación

Hazte miembro de Antonio Jenaro para comenzar a comentar.

Regístrate ahora

¿Ya estás registrado? Inicia sesión