Интерполяция и выражения

Интерполяция в шаблонах Petite-Vue

Интерполяцией называется подстановка значения выражения в текстовую часть шаблона. Используется двойная фигурная скобка: {{ ... }}. При рендеринге компонента Petite-Vue вычисляет содержимое выражения и выводит его в DOM-узел.

Пример простой интерполяции

<span>{{ count }}</span>

Переменная count должна присутствовать в реактивных данных. При изменении значения Petite-Vue автоматически обновит текстовое содержимое элемента без дополнительного кода.

Особенности вычисления выражений

Внутри интерполяции допустимы небольшие выражения Jav * aScript:

  • арифметика ({{ count + 1 }})
  • вызовы простых функций ({{ formatDate(date) }})
  • тернарные операторы ({{ done ? 'готово' : 'в процессе' }})

Это облегчает форматирование данных на уровне шаблона. Petite-Vue не поддерживает сложные конструкции вроде объявлений переменных или управляющих операторов; внутри допускаются только выражения.

Контекст вычисления

Контекстом служит реактивное состояние, переданное в createApp. Доступны только свойства состояния и методы, определённые в этом же объекте. Глобальные переменные и объекты доступны, но использовать их рекомендуется осторожно, так как нарушается принцип изоляции состояния.

Интерполяция и безопасность

Вставка данных через {{ }} выполняет HTML-экранирование. Это предотвращает внедрение HTML-разметки и скриптов. Для осознанной вставки HTML применяется директива v-html, но в отличие от интерполяции она не экранирует содержимое и должна использоваться только для доверенного HTML.

Реактивность и повторные вычисления

При каждом изменении зависимых реактивных свойств Petite-Vue повторно вычисляет выражение внутри интерполяции. Обновления происходят узконаправленно: если значение влияет только на один текстовый узел, обновляется только он. Это уменьшает накладные расходы по сравнению с полным повторным рендером.

Интерполяция внутри атрибутов

Для атрибутов применяется синтаксис v-bind или его краткая форма :. Текстовая интерполяция {{ }} в атрибутах не поддерживается. Такой подход даёт большую гибкость, поскольку v-bind работает с любым валидным JS-выражением и обновляет атрибут реактивно:

<img :alt="title" :src="imageUrl">

Интерполяция и шаблонные литералы

Внутри v-bind допускается использование шаблонных литералов:

<div :title="`Количество: ${count}`"></div>

Это упрощает комбинирование строк и значений без дополнительных вычислительных слоёв.

Выражения и производительность

Короткие выражения предпочтительны. Длинные выражения или частые вызовы функций в интерполяции усложняют трассировку зависимостей и приводят к избыточным обновлениям. При необходимости следует вынести вычисления в методы или вычисляемые свойства, чтобы уменьшить повторную работу при реактивных изменениях.

Связь с вычисляемыми значениями

Petite-Vue поддерживает вычисляемые (computed) значения через геттеры. Это позволяет переносить логическую обработку за пределы шаблона:

createApp({
  count: 0,
  get doubled() {
    return this.count * 2;
  }
}).mount()
<span>{{ doubled }}</span>

Интерполяция использует doubled как обычное свойство, а зависимость от count отслеживается автоматически.

Интерполяция и условный вывод

Для условного вывода рекомендуется использовать v-if и v-show. Тернарный оператор в интерполяции подходит только для замены текстового содержимого. Если требуется контролировать присутствие узлов в DOM, следует использовать директивы.

Интерполяция списков

Перебор коллекций через v-for позволяет комбинировать интерполяцию и выражения внутри каждого элемента списка. Каждое вычисление внутри v-for происходит в контексте текущего элемента итерации, что делает выражения более гибкими:

<li v-for="todo INTOdos">
  {{ todo.text }} ({{ todo.done ? '✓' : '✗' }})
</li>

Ключевые моменты

  • интерполяция безопасна и экранирует HTML
  • выражения должны оставаться простыми
  • сложную логику целесообразно переносить в методы и вычисляемые свойства
  • для атрибутов применяется v-bind, а не {{ }}
  • повторные вычисления триггерятся реактивностью и обновляют только необходимые узлы
Оглавление