Vue против React с точки зрения производительности

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

  1. Для любого типа мутации данных на месте Vue значительно превосходит React. Любые изменения во Vue запускают точное количество повторного рендеринга. В React любое изменение состояния приведет к повторному рендерингу всего поддерева компонентов. Об этом упоминается в разделе "Анимация" исходного сообщения. Даже в ситуациях, когда изменяется большой объем данных, Vue по-прежнему значительно превосходит React. В качестве примера теста см. Http://mathieuancelin.github.io/js-repaint-perfs/vue/opt.html против http://mathieuancelin.github.io/js-repaint-perfs/react/ opt.html (Обе полностью оптимизированные версии). Почему? Короче говоря, сравнение виртуальных DOM платно.
  2. При замене всего состояния новыми объектами Vue придется потратить дополнительную работу на преобразование этого нового объекта в реактивный, но все же обеспечивает сопоставимую производительность. См. Http://mathieuancelin.github.io/js-repaint-perfs/vue/ против http://mathieuancelin.github.io/js-repaint-perfs/react/
  3. Что касается производительности при запуске, React в целом немного быстрее, чем Vue, но это зависит от того, какой тип контента отображается. Для огромных таблиц данных с большим количеством простых ячеек (10k +) React работает быстрее, потому что стоимость каждой ячейки представляет собой простой виртуальный элемент в React по сравнению с фрагментом во Vue (последний немного дороже). Однако для таблиц с меньшим количеством ячеек или приложений, содержащих много компонентов со сложной разметкой, Vue в целом работает лучше. Вот репозиторий сравнения, который, к сожалению, на русском языке, но автор использовал React и Vue для реального использования, и Vue показывал лучшую производительность при запуске. Вот еще один тест для рендеринга 1k строк, который также тестирует производительность повторного рендеринга, частичного обновления и удаления.
  4. Наиболее важно то, что производительность Vue во время выполнения оптимизирована по умолчанию - единственная необходимая подсказка по производительности - это атрибут «отслеживание по» в списках, который сопоставим с «ключевой» опцией React. Вам не нужно ничего делать, чтобы получить полностью оптимизированный повторный рендеринг. В React вам придется использовать pureRenderMixin или вручную внедрять shouldComponentUpdate везде или прибегать к неизменяемым структурам данных, что вносит дополнительную сложность из-за языковых ограничений JavaScript.