[{"data":1,"prerenderedAt":160},["ShallowReactive",2],{"init-db":3,"content-\u002Fblog\u002Fvue3-optimizations-and-catalog":4},true,{"id":5,"title":6,"body":7,"description":152,"extension":153,"meta":154,"navigation":3,"path":156,"seo":157,"stem":158,"__hash__":159},"blog\u002Fblog\u002Fvue3-optimizations-and-catalog.md","Меньше запросов к серверу, умный каталог и коварные баги Vue 3",{"type":8,"value":9,"toc":144},"minimark",[10,14,19,23,62,66,69,72,75,79,82,93,99,106,113,120,123,126,130,141],[11,12,6],"h1",{"id":13},"меньше-запросов-к-серверу-умный-каталог-и-коварные-баги-vue-3",[15,16,18],"h2",{"id":17},"что-сделано","Что сделано",[20,21,22],"p",{},"За последние две недели удалось хорошо продвинуть проект: оптимизировал расчеты, доработал каталог материалов и исправил несколько неприятных ошибок.",[24,25,26,34,44,50,56],"ul",{},[27,28,29,33],"li",{},[30,31,32],"strong",{},"Оптимизировал расчет сметы."," Раньше при изменении площади стены или толщины слоя браузер отправлял запрос на сервер, где расчет выполнялся через PHP. Теперь простые вычисления происходят прямо в браузере на TypeScript. Результат обновляется мгновенно, а сервер получает меньше лишних запросов.",[27,35,36,39,40,43],{},[30,37,38],{},"Собрал единый каталог материалов."," Перенес данные по строительным материалам из СП в общую базу проекта. Теперь характеристики материалов используются во всех калькуляторах из одного источника. Заодно заменил хрупкие числовые ID на понятные строковые коды (",[41,42,41],"code",{},") и добавил отдельный класс для поиска материалов, обработки синонимов и получения расчетных параметров.",[27,45,46,49],{},[30,47,48],{},"Исправил логику точки росы."," Калькулятор больше не показывает предупреждение о конденсате для полов по грунту. Для таких конструкций отключаются график и статус влагонакопления, но параметры слоев по-прежнему участвуют в расчете сопротивления теплопередаче.",[27,51,52,55],{},[30,53,54],{},"Починил «летающие трубы» в теплом полу."," На небольших экранах трубы иногда визуально отрывались от слоя утеплителя. Причиной оказалась рассинхронизация масштабирования SVG. Теперь схема корректно отображается и на смартфонах.",[27,57,58,61],{},[30,59,60],{},"Доработал мобильную версию и подключил аналитику."," Исправил наложение блоков меню при прокрутке на телефонах и глобально подключил Яндекс.Метрику с поддержкой SSR.",[15,63,65],{"id":64},"что-на-стройке","Что на стройке",[20,67,68],{},"Последние две недели основное время забирали заказы на основной работе, поэтому стройка немного замедлилась.",[20,70,71],{},"Зато накопились обновления KIB4D. В ближайшее время хочу вернуться к кладке внутренних перегородок и начать подготовку к заливке пола.",[20,73,74],{},"Лето в этом году выдалось дождливым и пасмурным. Когда солнца мало, работать бывает тяжелее, но движение продолжается.",[15,76,78],{"id":77},"что-узнал","Что узнал",[20,80,81],{},"Nuxt 4 и Vue 3 продолжают учить меня внимательности.",[20,83,84,85,88,89,92],{},"Сначала поймал классическую ловушку реактивности. В скрипте значения реактивных переменных приходится получать через ",[41,86,87],{},".value",", а внутри ",[41,90,91],{},"\u003Ctemplate>"," Vue распаковывает их автоматически.",[20,94,95,96,98],{},"Одно лишнее ",[41,97,87],{}," в разметке — и график начинает работать неправильно.",[20,100,101,102,105],{},"Еще столкнулся с ошибкой гидратации (",[41,103,104],{},"Hydration mismatch",").",[20,107,108,109,112],{},"При генерации страницы сервер не имеет доступа к ",[41,110,111],{},"localStorage",", поэтому сначала видит ноль сохраненных конструкций. После загрузки браузер получает сохраненные данные, и HTML на клиенте перестает совпадать с HTML, который создал сервер.",[20,114,115,116,119],{},"Проблема решилась довольно просто: счетчик конструкций обернул в компонент ",[41,117,118],{},"\u003CClientOnly>",".",[20,121,122],{},"Впрочем PHP при этом никуда не исчезает. Я работаю с ним еще со времен PHP 3 и по-прежнему использую там, где действительно нужна серверная логика.",[20,124,125],{},"На данном этапе перенос простых расчетов на клиентскую сторону оказался более подходящим решением. Не нужно каждый раз отправлять данные на сервер, если результат можно мгновенно получить прямо в браузере.",[15,127,129],{"id":128},"что-дальше","Что дальше",[24,131,132,135,138],{},[27,133,134],{},"Выложить обновление на боевой сервер и обновить базу материалов.",[27,136,137],{},"Начать подготовку архитектуры для расширенных отчетов и почасовой климатической симуляции за год.",[27,139,140],{},"Вернуться к строительству и продолжить кладку перегородок.",[20,142,143],{},"Продолжаю.",{"title":145,"searchDepth":146,"depth":146,"links":147},"",2,[148,149,150,151],{"id":17,"depth":146,"text":18},{"id":64,"depth":146,"text":65},{"id":77,"depth":146,"text":78},{"id":128,"depth":146,"text":129},"Оптимизировал расчет сметы, доработал каталог материалов, исправил ошибки интерфейса и подключил аналитику.","md",{"date":155},"2026-08-03","\u002Fblog\u002Fvue3-optimizations-and-catalog",{"title":6,"description":152},"blog\u002Fvue3-optimizations-and-catalog","HS3y2elk0Ts8EDJs6p20G3-hLmebUNujXqr6mQg0aX0",1785730145308]