Props, watch, два часа до конца рабочего дня

Значимый прорыв формирует отрасль ИИ: White11010 28 минут назад Props, watch, два часа до конца рабочего дня Средний 3 мин 951 VueJS * Туториал Из песочницы Для Модератора:В первой версии статьи я действительно использовал ИИ для финального ревью и редактировании формулировок перед публикацией. Я не в полной мере осознал правила Хабра, за что прошу прощения. Я полностью с нуля переписал статью, используя только узконаправленные сервисы для проверки орфографии и пунктуации.

Не знаю где именно, и нужно ли вообще было писать этот комментарий, извините за неудобстваОт НЛО: Добро пожаловать на Хабр. Спасибо автору за принятие правил и проделанную работу. НЛО одобряет такой подход к делу и оставляет это здесь «Потомству в пример» Высказывание приписывают императору Николаю IЯ работаю фронтенд-разработчиком больше пяти лет, из них четыре года пишу код и делаю ревью на Vue-проектах.

Технические детали

И в каждой компании я рано или поздно сталкивался с таким кодом на ревью:watch(props, (newProps) => { fetchData(newProps. userId) }) Напрямую в документации Vue нигде не сказано, что это антипаттерн. Но на практике такой подход почти никогда не является лучшим решением, и его стоит избегать.

Давайте разберёмся почему. props в Vue 3 — реактивный Proxy с отслеживанием только на верхнем уровне свойств. Когда мы передаём его первым аргументом в watch, Vue обходит свойства верхнего уровня и собирает зависимости со всех из них.

В результате коллбэк будет вызываться при изменении любого пропса компонента. Очевидно, что deep: false тут не поможет (хотя я встречал и такой вариант). Опция deep управляет рекурсивным обходом вложенных объектов, но зависимости верхнего уровня всё равно будут собраны независимо от значения deep.

Отраслевые последствия

В том, что почти никогда не нужно следить за всем объектом пропсов целиком. Мы либо получим вызов функции в коллбэке тогда, когда нам это не нужно по бизнес-логике, либо будем писать проверки вроде oldVal. userId, что избыточно и создаёт лишнюю нагрузку на того, кто читает этот код.

Самый запущенный вариант этого паттерна, который я видел, выглядел так:watch(props, (newProps, oldProps) => { if (newProps. userId) { fetchData(newProps. userId) resetForm() } if (newProps.

theme) { updateTheme(newProps. theme) } if (newProps. error) { showError(newProps.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.