В чем разница между ref и shallowRef

ref и shallowRef оба создают реактивные ссылки, но по-разному обрабатывают вложенные данные.

ref делает глубокую реактивность - отслеживает изменения во всех вложенных свойствах объекта/массива:

const state = ref({ count: 0, nested: { value: 1 } });
state.value.nested.value = 2; // Изменение отслеживается

shallowRef создает поверхностную реактивность - отслеживает только изменение самой ссылки, но не вложенных данных:

const state = shallowRef({ count: 0, nested: { value: 1 } });
state.value.nested.value = 2; // Не вызывает реактивности
state.value = { ...state.value }; // Только так вызовет обновление

Используйте shallowRef для оптимизации, когда вложенные данные не нужны в реактивности, или для работы с большими неизменяемыми структурами.