Как отключить реактивность объекта?

Отключение реактивности объекта

Этот вопрос относится к Vue.js реактивной системе. Существует несколько способов отключить реактивность для оптимизации производительности.

Использование shallowRef

Для отключения глубокой реактивности используйте shallowRef, который отслеживает только изменение самого ref, но не вложенных свойств.

import { shallowRef } from "vue";

const state = shallowRef({
  user: { name: "John", age: 30 },
  settings: { theme: "dark" }
});

// Это вызовет обновление (замена объекта)
state.value = { user: { name: "Jane" }, settings: {} };

// Это НЕ вызовет обновление (изменение вложенного свойства)
state.value.user.name = "Jane";

Использование shallowReactive

Аналог shallowRef для reactive, отключает реактивность вложенных объектов.

import { shallowReactive } from "vue";

const state = shallowReactive({
  count: 0,
  nested: { value: 10 }
});

// Вызовет обновление
state.count++;

// НЕ вызовет обновление
state.nested.value = 20;

Использование Object.freeze

Замораживание объекта предотвращает его изменение и отключает реактивность Vue.

import { reactive } from "vue";

const data = Object.freeze({
  name: "John",
  age: 30
});

const state = reactive(data);

// При попытке изменить свойство ничего не произойдёт
state.name = "Jane"; // Игнорируется

Использование markRaw

Функция markRaw полностью отключает реактивность для объекта и его вложенной структуры.

import { reactive, markRaw } from "vue";

const complexObject = markRaw({
  data: [1, 2, 3],
  nested: { value: 100 }
});

const state = reactive({ complex: complexObject });

// Никакие изменения не вызовут обновление
state.complex.data[0] = 999;
state.complex.nested.value = 200;

Выбор правильного подхода

• markRaw — для больших объектов данных, которые не должны быть реактивными вообще (напр., данные из external библиотек)
• shallowRef / shallowReactive — когда нужна реактивность только на верхнем уровне
• Object.freeze — для data, которые не должны изменяться вообще
• Обычный ref/reactive — для стандартной полной реактивности

Оптимизируя реактивность, можно значительно улучшить производительность приложения, особенно при работе с большими объёмами данных.