#vue.js
#vue.js
Вопрос:
Представьте, что у вас есть огромный список дел:
[
{
id: 1,
name: Pet a cat,
priority: 'extreme'
},
...
]
Приложение состоит из трех компонентов grandparent -> parent -> child
Список задач объявляется в data функции дедушки и бабушки. Именно здесь список становится реактивным в первую очередь. Затем список передается от дедушки к родителю и от родителя к потомку в качестве реквизита. Из моего ограниченного понимания каждый компонент в цепочке добавляет свои собственные getters и setters . Меня беспокоит то, что этот способ передачи реквизита не является оптимальным для производительности. Я имею в виду, должен ли я реструктурировать свой код таким образом, чтобы минимизировать передачу таких реквизитов или нет?
Комментарии:
1. Есть несколько предостережений, которые могут укусить вас при передаче props через несколько уровней таким образом, если несколько уровней намерены манипулировать этими данными. Вообще говоря, если нескольким компонентам необходимо обрабатывать одни и те же данные, я предпочитаю использовать хранилище vuex вместо передачи реквизитов таким образом, чтобы у всех был один «источник истины»
2. @WesleySmith, я планирую выдавать события, чтобы только бабушка и дедушка могли решать, какие манипуляции с данными выполнять. Интересно, сколько вычислительной нагрузки добавляет этот подход
3. Это добавит нагрузку, будет несколько копий, хотя сомнительно, что вы когда-нибудь это заметите.
4. @WesleySmith, если бы вам нужно было угадать, насколько больше нагрузка по сравнению с подходом vuex?
5. @WesleySmith, спасибо, сэр! Хорошего дня и ночи!
Ответ №1:
Прежде всего, Props в Vue доступны только для чтения. Вы получите ошибку времени выполнения, если когда-либо попытаетесь ее обновить. Так что на самом деле нет сеттеров для родительских и дочерних компонентов, только для grand-parent.
Если ваши дочерние компоненты хотят его обновить, вам придется отправлять события до тех пор, пока какой-либо компонент не сможет фактически обновить данные.
Во-вторых, у вас не будет никаких проблем с производительностью, так работает Vue, и он хорош в этом. На самом деле это правильный и самый простой способ добиться того, чего вы хотите. Очевидно, что если список родительских / дочерних элементов расширится еще больше, вам будет сложно использовать только props events, но я не думаю, что проблема с производительностью.
Другим решением, позволяющим избежать передачи данных через каждый компонент-потомок, является использование «Хранилища Vuex». Однако новичкам это не так просто настроить и понять. Вы можете попробовать, если ваше приложение становится все более сложным.
Я бы посоветовал вам придерживаться вашего текущего решения, поскольку в нем нет ничего плохого.
Счастливого кодирования 🙂