Vue.js: слишком много реактивных данных замедляет работу приложения и приводит к снижению производительности?

Question

Наша компания разрабатывает очень сложное одностраничное приложение (что-то вроде excel) с vue.js.Существует более 10000 компонентов (каждая ячейка является компонентом), и каждый компонент будет иметь около 100 реактивных элементов (элементов данных).Мы также используем vuex.Это работает, но мы беспокоимся о его производительности (на самом деле он работает немного медленно).Мы слышали, что слишком большое количество реактивных данных приведет к снижению производительности.

Я часто слышу, как люди говорят, что если он будет переписан jQuery, он будет быстрее.

Мой вопрос: может ли vue обрабатывать столько реактивных данных?Если нет, то каков предел?Или, если мое приложение работает плохо, действительно ли оно вызвано самой vue?

Answer 1

если оно будет переписано jQuery, оно будет быстрее

Даже если бы это было правдой, это усложнило бы поддержку вашего приложения.Но это утверждение является False Dichotomy , как если бы выбор между платформами / библиотеками был решающим фактором при определении производительности приложения.Это не .Однако если вы хотите добиться максимальной производительности, тесты снова и снова показывают, что настроенное vanilla js-приложение превосходит любой framework.

Ключом к тому, чтобы что-то работало хорошо, является правильное проектирование (и реализация).Несмотря на то, что в Vue встроено множество улучшений производительности, для повышения производительности можно сделать и другие вещи, такие как использование функциональных (не сохраняющих состояние) компонентов.

Вы также можете рассмотреть реакцию, она не идет с настраиваемой настройкой производительности, как у Vue, но облегчает управление этими вещами.Конечный результат (возвращаясь к моей первоначальной точке) все еще будет во многом зависеть от вашей реализации.

Answer 2

Следующая ссылка доказывает, что Vue / Vuex - не проблема, возможно, ваш дизайн имеет недостатки?

Этот простой тест измеряет создание элементов в массивеи вывод в DOM через синхронизацию и асинхронный цикл по реактивному атрибуту VUEjs.С точки зрения UX, асинхронный метод предлагает лучший опыт, так как он допускает уведомления.

Credits to Pablo Garaguso