Глубокое клонирование реактивных объектов в Vue 3

Vue 3 использует Proxy для реактивности, что создает проблемы при попытке клонировать объекты. Стандартные методы работают не так, как ожидается:

const state = reactive({ user: { name: "Al" } });

// Проблемы:
const badCopy1 = { ...state }; // сохраняет Proxy-ссылки
const badCopy2 = JSON.parse(JSON.stringify(state)); // теряет методы и Proxy

3 рабочих способа

1. Комбинация toRaw + structuredClone

import { toRaw } from 'vue';

const original = reactive({ data: 123 });
const copy = structuredClone(toRaw(original));

2. Ручное глубокое копирование

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const clone = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    clone[key] = deepClone(obj[key]);
  }
  return clone;
}

const copy = reactive(deepClone(toRaw(original)));

3. Библиотечные решения

import { cloneDeep } from 'lodash-es';
const copy = reactive(cloneDeep(toRaw(obj)));

#tip #reactivity

Пятничная клубничка

Стартап Argil предлагает загрузить видео себя (или не себя) и создать такого вот клоника для OnlyFans

#ai

Хорошая библиотека Ark-ui, но с особенностями. Особенно у "выпадашки" HoverCard (для меню которая)

Долго мучился с расположением при динамично меняющемся таргет элементе - все как-то через одно место криво работало. Решил поставить :key на HoverCard и инкрементить его при апдейтах - и всё сразу заработало как надо. Ну, ё-моё...

Немного радует, что довольно часто обновляется и фиксят баги.

P.S. Ререндеринг через `:key` - плохая практика. Последний вариант.

#lib #arkui

Наткнулся не так давно на шикарный анимационный сериал - Love.Death.&.Robots. Давно такого удовольствия не получал.

Досмотрел последний эпизод (там независимые короткометражки). Самый безумный из всех, наверно - Jibaro

#video #offtop

Статья о современном минимальном наборе фавиконок для сайта

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

// manifest.webmanifest
{
   "icons": [
       { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
       { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
   ]
}

#webdev

Почему неконтролируемого использования watch лучше избегать?

1. Нарушение реактивного потока

watch часто скрывает логику реактивности. Например, отслеживание изменения переменной для вызова побочного эффекта (fetch) делает поток данных менее предсказуемым, особенно если эффекты затрагивают несколько компонентов.

Vue поощряет однонаправленную реактивность (данные -> шаблон). watch часто используется для обратной связи (данные -> данные), что усложняет отладку.

2. Плохая читаемость

Цепочки watch внутри компонента превращаются в плохо понимаемый в спагетти-код.

Плохо для рефакторинга - логика, разбросанная по watch, сложно переносится в composables.

3. Производительность

watch с deep: true может создать нагрузку при отслеживании больших объектов или массивов.

watch часто дублирует логику, которую можно выразить через computed. Вычисляемые свойства кешируются и эффективнее.

Неотписанные watch в динамических компонентах (например, внутри v-if) могут накапливаться и вызывать утечки памяти.


watch — это аварийный выход для случаев, когда декларативных подходов недостаточно. Если возможно, нужно старайться решить задачу через computed, props или события.

#reactivity #watch

Продолжаем подкасты с Деми Мурычем

Про let и const

#murych #audio

В конце каждого поста я ставлю хэштеги. Не все, оказалось, знают, что это не просто для красоты или декларативной категоризации

Кликните на какой-нибудь и увидите, почему Telegram на голову выше других известных мессенджеров и соцсетей

По ним же можно искать

#tip #telegram

Представитель hh.ru согласился дать интервью каналу

Задавайте вопросы и запросы, какие темы осветить. Любые.

#interview #hh #job

Все, кто имет отношение, приглашаются пройти исследование русскоязычных продакт-менеджеров — 2025

Команда DevCrowd в четвёртый раз запускает исследование, чтобы понять, как живётся продактам:

– что входит в зону ответственности продакта в компаниях разного размера,
– какие навыки востребованы и чего не хватает,
– как и где продакты учатся и растут,
– какие инструменты и подходы реально работают,
– сколько получают и сколько хотят получать специалисты на разных грейдах.

https://survey.alchemer.eu/s3/90815016/dvcrowd-product-2025

Подробней на канале Тиграна Басеяна о продакт менеджменте и стартапах

#offtop

Обычно для группировки массива по какому-то ключу используют reduce

Однако уже доступны Object.groupBy и Map.groupBy, которые позволяют упростить эту процедуру

const users = [
  { id: 1, name: "Alex", role: "admin" },
  { id: 2, name: "Anna", role: "user" },
];

const grouped = Object.groupBy(users, ({ role }) => role);

// Результат:
// { admin: [{...}], user: [{...}] }

#js

Ради интереса выставил своего Аргуса на конкурс проектов на Product Radar

Кому бот понравился - поддержите голосом (надо залогиниться на сайт).

Хейтеры могут поддержать соперников. Можно сразу всех вместе.

#argus #productradar #contest