🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Какие особенности слежения за "глубокими" объектами?
Когда мы отслеживаем изменения в объектах (например, в React, Vue или MobX), важно понимать, что JavaScript не умеет автоматически следить за вложенными свойствами. Это называется глубокое слежение (deep watching).
Проблема: поверхностное слежение (`shallow watching`)
JavaScript сравнивает только ссылки на объекты, а не их содержимое.
const obj = { user: { name: "Иван" } };
const copy = obj;
copy.user.name = "Петр";
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)
🚩Глубокое копирование vs поверхностное
Обычный Object.assign() или spread-оператор ({ ...obj }) делают поверхностное копирование:
const obj = { user: { name: "Иван" } };
const shallowCopy = { ...obj };
shallowCopy.user.name = "Петр";
console.log(obj.user.name); // "Петр" 😱 (изменился оригинал!)
Для глубокого копирования можно использовать structuredClone() или JSON.parse(JSON.stringify(obj)):
const deepCopy = structuredClone(obj);
deepCopy.user.name = "Петр";
console.log(obj.user.name); // "Иван" ✅ (оригинал не изменился)
🚩Как следить за глубокими объектами?
🟠React: следим через `useState` и `useEffect`
В React состояние обновляется только при изменении ссылки (shallow compare).
const [user, setUser] = useState({ name: "Иван" });
useEffect(() => {
console.log("Имя изменилось:", user.name);
}, [user]); // Работает только если user — новый объект!
// НЕ сработает:
user.name = "Петр"; // user остался тем же объектом
Решение – создавать новый объект при изменении:
setUser(prev => ({ ...prev, name: "Петр" }));
🟠Vue: `watch` vs `watchEffect` (глубокое слежение)
Обычный watch следит только за первой вложенностью
watch(user, (newValue) => {
console.log("Изменено:", newValue);
});
Глубокое слежение (deep: true)
watch(user, (newValue) => {
console.log("Изменено:", newValue);
}, { deep: true });
Ставь 👍 и забирай 📚 Базу знаний