Hack Frontend Community

Как в Vue.js работает виртуальный DOM?

Что такое виртуальный DOM?

Виртуальный DOM (Virtual DOM) — это облегчённая копия реального DOM, которая позволяет Vue.js эффективно обновлять интерфейс без непосредственного взаимодействия с реальным DOM на каждом изменении данных.

Как это работает?

  1. Vue создает виртуальное представление DOM (VNode) на основе текущего состояния данных.
  2. При изменении данных создается новое виртуальное дерево (новый VNode).
  3. Vue сравнивает старое и новое дерево (diffing) и вычисляет минимальный набор изменений.
  4. Обновляется только изменившаяся часть реального DOM (patching), а не весь интерфейс.

Преимущества виртуального DOM

  • Производительность — обновляется только изменённая часть интерфейса, а не весь DOM.
  • Простота разработки — Vue автоматически оптимизирует обновления.
  • Реактивность — изменения данных мгновенно отражаются в интерфейсе без необходимости вручную обновлять элементы DOM.

Пример работы виртуального DOM в Vue

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <p>Счётчик: {{ count }}</p>
  <button @click="count++">Увеличить</button>
</template>

Что происходит в этом коде?

  1. Vue создаёт виртуальный DOM на основе шаблона (template).
  2. При нажатии на кнопку count увеличивается.
  3. Vue создаёт новый виртуальный DOM и сравнивает его с предыдущим.
  4. Vue находит разницу (diff) и изменяет только текст в <p>, а не весь документ.

Виртуальный DOM делает Vue.js быстрым и удобным для работы. Он минимизирует обновления реального DOM, что улучшает производительность и делает интерфейсы более отзывчивыми.