{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Оптимизация на этапе компиляции (Compile-time optimization)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue-компилятор анализирует шаблон и "},{"type":"text","marks":[{"type":"bold"}],"text":"помечает участки, которые НЕ меняются"},{"type":"text","text":", как "},{"type":"text","marks":[{"type":"italic"}],"text":"static nodes"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это значит:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"статические части вообще не участвуют в diff"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"они создаются один раз и больше не проверяются"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"виртуальные ноды для них не пересоздаются"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"

Заголовок

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue пометит "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" как статический узел."},{"type":"hardBreak"},{"type":"text","text":"Он не будет участвовать в сравнении и обновлении."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это сильно уменьшает diff-дерево."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Patch flags — флаги патчинга (Vue 3)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Главное нововведение Vue 3."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Во время компиляции Vue добавляет специальные флаги:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"TEXT — изменяется только текст"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"PROPS — изменяются только определённые пропсы"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"CLASS — изменяется только класс"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"STYLE — изменяются только стили"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это позволяет Vue "},{"type":"text","marks":[{"type":"bold"}],"text":"не сравнивать всю виртуальную ноду"},{"type":"text","text":", а сразу применять конкретное обновление, минуя diff."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример виртуальной ноды с флагом:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"// Vue знает, что меняется только текст\ncreateVNode(\"p\", null, message, PatchFlags.TEXT)\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡ Diffing выполняется "},{"type":"text","marks":[{"type":"bold"}],"text":"точечно"},{"type":"text","text":", а не для всего дерева."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 3. "},{"type":"text","marks":[{"type":"bold"}],"text":"Block Tree (блочное дерево)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue 3 использует структуру "},{"type":"text","marks":[{"type":"bold"}],"text":"блоков"},{"type":"text","text":", которые:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"группируют динамичные части"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"исключают статические поддеревья"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"минимизируют количество сравниваемых нод"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это огромная оптимизация, которой нет в React."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Идея:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Динамические элементы отслеживаются отдельно,"},{"type":"hardBreak"},{"type":"text","text":"а статическое дерево вообще не участвует в diff."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это уменьшает работу алгоритма сравнения в разы."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 4. "},{"type":"text","marks":[{"type":"bold"}],"text":"Hoisting — вынос статичных узлов"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Статические элементы “выносятся” за пределы рендера и создаются только один раз:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"const _hoisted_1 = /#PURE/ createVNode(...)\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Рендер-функция:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не пересоздаёт узел"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не сравнивает его"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"использует заранее созданный кэш"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡ Меньше создания объектов → меньше GC → быстрее рендер."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 5. "},{"type":"text","marks":[{"type":"bold"}],"text":"Memoization (v-memo)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue может кэшировать фрагменты шаблона:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"
\n {{ expensiveComputation }}\n
\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":" не изменился → Vue "},{"type":"text","marks":[{"type":"bold"}],"text":"пропускает"},{"type":"text","text":" дифф всей секции."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 6. "},{"type":"text","marks":[{"type":"bold"}],"text":"Оптимизация списка через ключи (v-for + key)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue эффективно сравнивает списки, если задать ключ:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"
\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Алгоритм:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"минимально перемещает элементы"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не перерендеривает лишнее"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"использует O(n) оптимизации"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Без ключей производительность падает."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 7. "},{"type":"text","marks":[{"type":"bold"}],"text":"Reactive refs и reactive → точечные обновления"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue 3 использует прокси-реактивность:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"обновляется только конкретное поле"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"только конкретный watcher"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"только нужный компонент"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"только нужный кусок VDOM"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это минимизирует запуск рендера."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 8. "},{"type":"text","marks":[{"type":"bold"}],"text":"Tree-shaking и оптимизация сборки"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue 3 — полностью tree-shakable:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"неиспользуемые функции не попадают в бандл"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"меньше кода → быстрее загрузка → быстрее рендер"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как Vue оптимизирует Virtual DOM?

Комментарии