Атрибут Lazy
Атрибут Lazy в Livewire используется для отложенной загрузки компонентов.
Когда компонент помечен этим атрибутом, его начальная загрузка откладывается
до момента, когда он становится видимым в области просмотра браузера
или до первого взаимодействия пользователя с ним.
Это особенно полезно для оптимизации производительности страниц
с большим количеством тяжелых компонентов.
Синтаксис
Атрибут Lazy применяется к классу компонента
с помощью атрибута PHP 8:
<?php
namespace AppLivewire;
use LivewireComponent;
use LivewireAttributesLazy;
#[Lazy]
class HeavyComponent extends Component
{
public function render()
{
return view('livewire.heavy-component');
}
}
?>
Пример
Давайте создадим тяжелый компонент, который загружает
большой объем данных, и применим к нему атрибут Lazy:
<?php
namespace AppLivewire;
use LivewireComponent;
use LivewireAttributesLazy;
#[Lazy]
class HeavyComponent extends Component
{
public $items = [];
public function mount()
{
// Simulate heavy data loading
$this->items = range(1, 1000);
sleep(2);
}
public function render()
{
return view('livewire.heavy-component');
}
}
?>
<div>
<h3>Heavy Component</h3>
<p>Loaded items: {{ count($items) }}</p>
<ul>
@foreach ($items as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
</div>
Результат выполнения кода (компонент загрузится только когда появится в области видимости):
<div>
<h3>Heavy Component</h3>
<p>Loaded items: 1000</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<!-- ... -->
</ul>
</div>
Пример
Атрибут Lazy можно комбинировать с параметром
onLoad для выполнения действий при загрузке компонента:
<?php
namespace AppLivewire;
use LivewireComponent;
use LivewireAttributesLazy;
#[Lazy]
class StatisticsComponent extends Component
{
public $stats = [];
public function loadStatistics()
{
// Simulate statistics loading
$this->stats = [
'users' => 1500,
'posts' => 5000,
'comments' => 25000
];
}
public function render()
{
return view('livewire.statistics-component');
}
}
?>
<div wire:init="loadStatistics">
<h3>Statistics</h3>
@if ($stats)
<ul>
<li>Users: {{ $stats['users'] }}</li>
<li>Posts: {{ $stats['posts'] }}</li>
<li>Comments: {{ $stats['comments'] }}</li>
</ul>
@else
<p>Loading statistics...</p>
@endif
</div>
Результат выполнения кода:
<div>
<h3>Statistics</h3>
<ul>
<li>Users: 1500</li>
<li>Posts: 5000</li>
<li>Comments: 25000</li>
</ul>
</div>
Пример
Атрибут Lazy также можно использовать с параметром
onInteraction для загрузки компонента только
при взаимодействии пользователя:
<?php
namespace AppLivewire;
use LivewireComponent;
use LivewireAttributesLazy;
#[Lazy(onInteraction: true)]
class ChartComponent extends Component
{
public $chartData = [];
public function loadChart()
{
// Simulate chart data loading
$this->chartData = [
'labels' => ['Jan', 'Feb', 'Mar', 'Apr'],
'values' => [10, 20, 15, 30]
];
}
public function render()
{
return view('livewire.chart-component');
}
}
?>
<div wire:init="loadChart">
<h3>Chart</h3>
@if ($chartData)
<div>
<p>Labels: {{ implode(', ', $chartData['labels']) }}</p>
<p>Values: {{ implode(', ', $chartData['values']) }}</p>
</div>
@else
<p>Click to load chart</p>
@endif
</div>
Результат выполнения кода (компонент загрузится только после клика пользователя):
<div>
<h3>Chart</h3>
<div>
<p>Labels: Jan, Feb, Mar, Apr</p>
<p>Values: 10, 20, 15, 30</p>
</div>
</div>
