Vue3 Декларативный рендеринг

Декларативный рендеринг означает управление обновлениями представления через данные, а не прямое манипулирование DOM.

Декларативный рендеринг позволяет разработчикам больше сосредоточиться на бизнес-логике, не беспокоясь о том, как обновлять представление и DOM.

Декларативный рендеринг Vue3 — это подход к рендерингу на основе шаблонов, который позволяет разработчикам описывать структуру страницы и связи привязки данных с помощью лаконичного синтаксиса шаблонов, без необходимости напрямую манипулировать DOM.

Декларативный рендеринг Vue3 упрощает процесс обновления UI, используя шаблоны, директивы (такие как v-if, v-for, v-bind и т. д.) и реактивные данные.

Декларативный рендеринг Vue позволяет вам только объявить, как должен быть представлен UI; Vue автоматически обновит представление на основе изменений данных. Когда вы изменяете данные, представление реагирует автоматически.

Vue3 использует синтаксис шаблонов (похожий на HTML) для описания UI, а выражения в шаблоне (такие как {{ message }}) привязываются к модели данных компонента.

1. Привязка данных

Привязка данных — это ядро декларативного рендеринга.

Благодаря привязке данных Vue может автоматически обновлять содержимое элементов DOM, избегая традиционного ручного манипулирования DOM.

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

Интерполяционное выражение использует двойные фигурные скобки{{ }}для вставки данных компонента в HTML-шаблон.

Пример

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>

В приведенном выше примере двойные фигурные скобки{{ message }}будут отображены какHello, Vue 3!, и когда значение message изменится, представление автоматически обновится.

Содержимое внутри двойных фигурных скобок не ограничивается идентификаторами или путями — можно использовать любое допустимое выражение JavaScript.

<h1>{{ message.split('').reverse().join('') }}</h1>

Привязка атрибутов

С помощьюv-bindдирективы можно привязывать HTML-атрибуты к данным компонента, что позволяет динамически обновлять атрибуты DOM-элементов (таких как href, class, src) в зависимости от состояния компонента.

Пример

<template>
  <div>
    <a v-bind:href="url">Нажми на меня</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com'
    };
  }
};
</script>

В приведённом выше примере v-bind:href привязывает данные url к атрибуту href тега <a>. Когда url изменяется, href обновляется автоматически.

Условный рендеринг

Vue реализует условный рендеринг с помощью директив v-if, v-else-if и v-else, решая, рендерить ли DOM-элемент на основе определённого условия данных.

Пример

<template>
  <div>
    <p v-if="isVisible">Этот текст виден</p>
    <button @click="toggleVisibility">Переключить видимость</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В приведённом выше примере, когда isVisible имеет значение true, тег <p> рендерится. Когда нажимают кнопку, isVisible переключается, и то, отображается ли тег <p>, также меняется автоматически.

Рендеринг списков

Используйте директиву v-for для рендеринга списка.

Vue рендерит соответствующий DOM-элемент для каждого элемента массива и автоматически обновляет представление при изменении данных массива.

Пример

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Vue 3' },
        { id: 2, name: 'JavaScript' },
        { id: 3, name: 'HTML' }
      ]
    };
  }
};
</script>

В приведённом выше примере v-for отображает список на основе массива items. Каждый элемент списка имеет key, чтобы помочь Vue отслеживать каждый элемент, тем самым повышая эффективность рендеринга.

Двусторонняя привязка данных

Vue предоставляет директиву v-model для реализации двусторонней привязки между элементами формы (например, <input>) и данными компонента. Таким образом, значение элемента формы синхронизируется с моделью данных. Когда пользователь вводит данные, они автоматически обновляются, а при изменении данных автоматически обновляется представление.

Пример

<template>
  <div>
    <input v-model="message" placeholder=Введите текст />
    <p>Вы ввели: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

В приведённом выше примере v-model поддерживает синхронизацию значения элемента input с данными message. Когда пользователь вводит текст в поле input, message автоматически обновляется, а содержимое тега <p> также автоматически изменяется.

Обработка событий

Vue предоставляет директиву v-on для прослушивания событий DOM и выполнения методов при срабатывании событий. Этот подход позволяет декларативно обрабатывать такие события, как пользовательский ввод и клики.

Пример

<template>
  <div>
    <button v-on:click="increment">Нажми меня</button>
    <p>Количество кликов: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

В приведённом выше примере v-on:click прослушивает событие click кнопки и вызывает метод increment при каждом клике, чтобы увеличить значение count. count автоматически обновляется в представлении.

Вычисляемые свойства

Вычисляемые свойства — это способ, предоставляемый Vue для декларативного вычисления значений.

Вычисляемые свойства основаны на реактивных данных и пересчитываются только при изменении зависимых данных.

Пример

<template>
  <div>
    <p>Исходная сумма: {{ amount }}</p>
    <p>Сумма после налога: {{ computedAmount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 100
    };
  },
  computed: {
    computedAmount() {
return this.amount * 1.1; // Предположим, что ставка налога составляет 10%
    }
  }
};
</script>

computedAmount — это вычисляемое свойство, которое вычисляет сумму после налога на основе amount. Когда amount изменяется, computedAmount автоматически обновляется без необходимости вручную запускать обновление представления.

Другие расширения