# Механизмы отрисовки и оптимизации

Это необязательный раздел для того, чтобы узнать как правильно использовать Vue, но в нём представлена более подробная информация, если интересно разобраться как работает отрисовка страниц под капотом.

# Виртуальный DOM

Теперь, когда знаем как методы-наблюдатели обновляют компоненты, может возникнуть вопрос: каким же образом в конечном итоге эти изменения попадают в DOM?! Возможно, ранее уже слышали о виртуальном DOM, многие фреймворки, включая и Vue, используют эту парадигму чтобы убедиться что интерфейсы эффективно отражают все изменения, выполненные в JavaScript.

Копия DOM в JavaScript, называемая виртуальным DOM, создаётся из-за того, что работа с DOM является дорогостоящими вычислительными операциями в JavaScript. В тоже время, выполнение обновлений в JavaScript дёшево, но поиск нужных DOM-узлов и их обновление затратно. Поэтому набирается список предстоящих изменений и применяется к DOM разом.

Виртуальный DOM — это легковесный объект JavaScript, создаваемый render-функцией. Он принимает три аргумента: элемент, объект с данными, входными параметрами, атрибутами и многим другим, а также массив. В массиве указываются дочерние элементы, каждый из которых тоже имеет по три аргумента, и они также могут иметь свои дочерние элементы и так далее, пока полное дерево элементов не будет построено.

Когда требуется обновить элементы списка — выполняем это через JavaScript, используя реактивность о которой упоминали ранее. Затем все эти изменения вносятся в JavaScript копию, т.е. в виртуальный DOM, и выполняется операция сравнения с оригинальным DOM. Только после этого определяются какие обновления необходимо сделать. Таким образом виртуальный DOM позволяет получить производительные обновления UI!