Warning: mkdir(): No space left on device in /var/www/hottg/post.php on line 59

Warning: file_put_contents(aCache/aDaily/2025-07-15/post/easy_javascript_ru/--): Failed to open stream: No such file or directory in /var/www/hottg/post.php on line 72
🤔 Какие особенности слежения за "глубокими" объектами? @Frontend | Вопросы собесов

Frontend | Вопросы собесов | United States America (US)

Create: 2025-05-21 Update: 2025-07-15 17:37:17

🤔 Какие особенности слежения за "глубокими" объектами?

Когда мы отслеживаем изменения в объектах (например, в 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 });

Ставь 👍 и забирай 📚 Базу знаний

Frontend | Вопросы собесов

const obj = { user: { name: "Иван" } };
const copy = obj; 

copy.user.name = "Петр"; 
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)

🚩

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 });

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍10💊1

hottg.com/easy_javascript_ru/1548

3.78K viewsMay 21 at 09:05

>>Click here to continue<<

Frontend | Вопросы собесов

Share with your best friend

What is Telegram?

Telegram is a cloud-based instant messaging service that has been making rounds as a popular option for those who wish to keep their messages secure. Telegram boasts a collection of different features, but it’s best known for its ability to secure messages and media by encrypting them during transit; this prevents third-parties from snooping on messages easily. Let’s take a look at what Telegram can do and why you might want to use it.

🤔 Какие особенности слежения за "глубокими" объектами?

Frontend | Вопросы собесов TG
Webview: 1548
Telegram TG Webview: hottg.com/easy_javascript_ru/webview
Telegram TG Channel: Frontend | Вопросы собесов
Telegram Updated:
Warning: filemtime(): stat failed for aCache/aDaily/2025-07-15/post/easy_javascript_ru/-- in /var/www/hottg/post.php on line 338
1970-01-01 00:00:00

United States America Popular Telegram Group (US)

Warning: Undefined array key 3 in /var/www/hottg/function.php on line 115

Fatal error: Uncaught mysqli_sql_exception: Can't create/write to file '/tmp/#sql-temptable-a06e-3f0908-7c1.MAI' (Errcode: 28 "No space left on device") in /var/www/hottg/function.php:216 Stack trace: #0 /var/www/hottg/function.php(216): mysqli_query() #1 /var/www/hottg/function.php(115): select() #2 /var/www/hottg/post.php(351): daCache() #3 /var/www/hottg/route.php(63): include_once('...') #4 {main} thrown in /var/www/hottg/function.php on line 216