Атрибут Computed
Атрибут Computed используется для маркировки метода компонента как вычисляемого свойства.
Такой метод выполняется только один раз за рендеринг, а результат кешируется.
При повторном обращении к методу в рамках одного рендеринга будет возвращено кешированное значение.
Это особенно полезно для ресурсоёмких операций, например, запросов к базе данных или сложных вычислений.
Синтаксис
<?php
use Livewire\Attributes\Computed;
use Livewire\Component;
class UserComponent extends Component
{
#[Computed]
public function fullName()
{
// Resource-intensive logic
return $this->firstName . ' ' . $this->lastName;
}
}
?>
Атрибут применяется к методу, который должен возвращать вычисляемое значение. Метод не должен принимать обязательные параметры. Результат кешируется на время текущего запроса к компоненту.
Пример
Рассмотрим компонент, который отображает список пользователей и их полные имена.
Полное имя вычисляется из имени и фамилии с помощью метода fullName.
<?php
namespace App\Livewire;
use Livewire\Attributes\Computed;
use Livewire\Component;
use App\Models\User;
class UserList extends Component
{
public function render()
{
return view('livewire.user-list');
}
#[Computed]
public function fullName()
{
// Simulate heavy operation
$user = User::find(1);
return $user->name . ' ' . $user->surname;
}
}
?>
<div>
<h3>User Info</h3>
<p>Full name: {{ $this->fullName() }}</p>
<p>Full name: {{ $this->fullName() }}</p>
<p>Full name: {{ $this->fullName() }}</p>
</div>
Результат выполнения кода в шаблоне:
<div>
<h3>User Info</h3>
<p>Full name: John Doe</p>
<p>Full name: John Doe</p>
<p>Full name: John Doe</p>
</div>
Несмотря на три обращения к методу fullName, запрос к базе данных выполнится только один раз.
Остальные вызовы вернут кешированное значение.
Пример с зависимостями
Кеш вычисляемого свойства автоматически сбрасывается, когда изменяются свойства, от которых оно зависит.
В данном примере при изменении $firstName или $lastName метод fullName будет выполнен заново.
<?php
namespace App\Livewire;
use Livewire\Attributes\Computed;
use Livewire\Component;
class UserProfile extends Component
{
public $firstName = 'John';
public $lastName = 'Doe';
#[Computed]
public function fullName()
{
return $this->firstName . ' ' . $this->lastName;
}
public function updateName()
{
$this->firstName = 'Jane';
}
public function render()
{
return view('livewire.user-profile');
}
}
?>
<div>
<p>Full name: {{ $this->fullName() }}</p>
<button wire:click="updateName">Update First Name</button>
</div>
После нажатия на кнопку свойство $firstName изменится на 'Jane',
что приведёт к пересчёту вычисляемого свойства, и отобразится новое имя.
