В чем разница между shallowRef и markRaw в Vue 3?

Vue 3 introduced various ways to handle reactivity, and two useful functions are shallowRef и markRaw. Давайте разберемся, чем они отличаются и в каких случаях их следует использовать.

shallowRef

shallowRef создает реактивную ссылку на объект, но делает это "поверхностно". Это означает, что Vue будет отслеживать только саму ссылку и изменения на верхнем уровне, но не будет рекурсивно отслеживать вложенные свойства этого объекта.

Пример использования shallowRef:

import { shallowRef } from 'vue'

const state = shallowRef({
  count: 0,
  user: {
    name: 'Алекс',
    age: 25,
  }
});

// Изменения в user не будут реактивными.
state.value.user.name = 'Иван'; // Изменение не будет отслеживаться

// Однако изменения на верхнем уровне будут реактивными
state.value.count++; // Это изменение будет отслеживаться

markRaw

markRaw используется для указания Vue, что данный объект не должен быть реактивным. Это может быть полезно, если мы хотим передать объект в реактивный контекст, но не хочем, чтобы Vue отслеживал изменения этого объекта. markRaw используется в тех случаях, когда производительность критически важна, и когда вы знаете, что изменения в этом объекте вам не нужны для реактивности.

Пример использования markRaw:

import { markRaw, reactive } from 'vue'

const nonReactiveObject = markRaw({
  key: 'value'
});

const state = reactive({
  item: nonReactiveObject
});

// Изменения в nonReactiveObject не будут реактивными
state.item.key = 'новое значение'; // Изменение не будет отслеживаться

Когда использовать?

• Используйте shallowRef, если вам нужно создать реактивную ссылку, но без глубокого отслеживания вложенных свойств. Это может ускорить производительность, если у вас есть глубокие объекты и вам важна только реактивность верхних уровней.
• Используйте markRaw, если у вас есть объект, который не должен быть реактивным. Это хорошо подходит для объектов, которые будут переданы как пропсы в компоненты или храниться в состоянии, но вам не нужно, чтобы Vue следил за их изменениями.

Заключение

Обе функции, shallowRef и markRaw, предоставляют разработчикам гибкость в управлении реактивностью в Vue 3. Понимание их различий поможет вам лучше контролировать поведение вашего приложения и обеспечивать высокую производительность.