Для чого використовується v-pre?

VueJunior~1 хв читання

Директива v-pre використовується для того, щоб сказати Vue: "не компілюй цю ділянку шаблону".

Тобто:

v-pre вимикає обробку виразів Vue ({{ }}, директив тощо) і просто виводить вміст як є.

Що робить `v-pre`?

Vue не буде інтерпретувати:

Оскільки Vue не аналізує вміст - це може трохи покращити продуктивність у великих шаблонах.

html

<div v-pre>
  {{ це не буде інтерпольовано }}
</div>

Користувач побачить:

{{ це не буде інтерпольовано }}

Тобто Vue просто ігнорує вираз.

Якщо потрібно показати 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 не витрачатиме час на аналіз → швидше рендериться.

Не можна ставити Vue-директиви всередині, тому що вони не будуть оброблені:

html

<div v-pre>
  <span v-if="isVisible">Не спрацює</span>
</div>

v-pre не потрібно плутати з:

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.