Защищённое свойство

Защищённое свойство (protected property) в Livewire - это свойство компонента, помеченное модификатором доступа protected. Такие свойства не передаются в JavaScript-часть компонента и не синхронизируются с клиентской стороной. Они используются для хранения внутреннего состояния, вычисляемых данных или служебной информации, которая не должна быть доступна в браузере.

Основное отличие защищённого свойства от публичного - оно не участвует в процессе гидратации и не отправляется клиенту. Это повышает безопасность и снижает объём передаваемых данных. Защищённые свойства можно изменять и читать только внутри класса компонента.

Синтаксис

<?php
	class MyComponent extends Component
	{
		protected $internal = 'value';
	}
?>

Пример

Создадим компонент с защищённым свойством для хранения конфиденциальных данных:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Profile extends Component
	{
		public $name = 'John Doe';
		
		protected $apiKey = 'secret-12345';
		
		public function getApiKey()
		{
			return $this->apiKey;
		}
		
		public function render()
		{
			return view('livewire.profile');
		}
	}
?>

<div>
	<p>Name: {{ $name }}</p>
	<p>API Key: {{ $this->getApiKey() }}</p>
</div>

Результат выполнения кода:

<div>
	<p>Name: John Doe</p>
	<p>API Key: secret-12345</p>
</div>

Пример

Защищённое свойство не появляется в JavaScript-объекте компонента. Попытка обратиться к нему из Blade-шаблона напрямую приведёт к ошибке, если не использовать метод-геттер:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Data extends Component
	{
		public $user = 'admin';
		
		protected $password = 'super-secret';
		
		public function render()
		{
			return view('livewire.data');
		}
	}
?>

<div>
	<p>User: {{ $user }}</p>
	<p>Password: {{ $password }}</p>
</div>

Результат выполнения кода:

<div>
	<p>User: admin</p>
	<p>Password: </p>
</div>

Пример

Защищённые свойства часто используются для кеширования результатов вычислений, которые не должны синхронизироваться с клиентом:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Stats extends Component
	{
		public $items = [1, 2, 3, 4, 5];
		
		protected $sum;
		
		public function getSum()
		{
			if ($this->sum === null) {
				$this->sum = array_sum($this->items);
			}
			
			return $this->sum;
		}
		
		public function render()
		{
			return view('livewire.stats');
		}
	}
?>

<div>
	<p>Sum: {{ $this->getSum() }}</p>
</div>

Результат выполнения кода:

<div>
	<p>Sum: 15</p>
</div>

Смотрите также

публичные свойства public-property,
которые доступны в шаблоне и синхронизируются с клиентом
вычисляемые свойства computed-get,
которые создаются с помощью метода с аннотацией #[Computed]
метод render,
который возвращает шаблон компонента
класс Component,
от которого наследуются все компоненты Livewire