Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Для чого використовується v-pre?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`v-pre`** - це директива, яка каже Vue не компілювати цю ділянку шаблону: вона вимикає обробку виразів (`{{ }}`, директив тощо) і виводить вміст як є. **Ключове:** на відміну від `v-once`, який рендерить шаблон один раз і потім заморожує, `v-pre` взагалі не обробляє шаблон.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняДиректива `v-pre` використовується для того, щоб **сказати Vue: "не компілюй цю ділянку шаблону"**. Тобто: > `v-pre` **вимикає обробку виразів Vue (**`{{ }}`**, директив тощо) і просто виводить вміст як є.** --- ## Що робить `v-pre`? #### Пропускає компіляцію шаблону Vue **не буде інтерпретувати**: - інтерполяції: `{{ message }}` - директиви: `v-if`, `v-for`, `v-model` - будь-які вирази #### Пришвидшує перший рендер Оскільки Vue не аналізує вміст - це може трохи покращити продуктивність у великих шаблонах. --- ## Приклад використання ```html <div v-pre> {{ це не буде інтерпольовано }} </div> ``` Користувач побачить: ``` {{ це не буде інтерпольовано }} ``` Тобто Vue просто ігнорує вираз. --- ## Приклад: показуємо приклад коду з mustache-синтаксисом Якщо потрібно показати Vue-шаблон всередині Vue: ```html <pre v-pre> <code> {{ user.name }} </code> </pre> ``` Без `v-pre` Vue спробував би інтерпретувати `{{ user.name }}`. --- ## Приклад: пришвидшити рендер статичного блоку ```html <div v-pre> <h2>Статичний блок</h2> <p>Цей текст не залежить від даних і не потребує обробки.</p> </div> ``` Vue не витрачатиме час на аналіз → швидше рендериться. --- ## Що не можна використовувати з `v-pre`? Не можна ставити Vue-директиви всередині, тому що вони не будуть оброблені: ```html <div v-pre> <span v-if="isVisible">Не спрацює</span> </div> ``` --- ## Важливо розуміти `v-pre` не потрібно плутати з: #### `v-once` - один раз відрендерилося, далі оновлюється - Vue **обробляє шаблон**, але потім заморожує #### `v-pre` - взагалі не обробляє шаблон - усе всередині - як звичайний HTML/текстДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.