Откуда импортируются методы reactive и ref

Вопрос

Откуда импортируются методы reactive и ref

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает, откуда берутся ключевые методы Vue.js 3 и в чем их различие. Также важно, чтобы кандидат знал, что это часть Composition API.

Ключевые тезисы

• Методы reactive и ref импортируются из пакета 'vue' — это стандартный модуль Vue.js 3.
• reactive используется для создания реактивного объекта, а ref — для создания реактивной ссылки на значение.
• ref часто применяется для примитивных значений (числа, строки), а reactive — для объектов и массивов.
• Оба метода являются частью Composition API, который появился в Vue 3.

Подробный ответ

Методы reactive и ref импортируются из пакета 'vue', который является стандартным модулем Vue.js 3. Эти методы являются частью Composition API — нового подхода к организации кода, представленного в Vue 3. Composition API позволяет более гибко структурировать логику компонентов, особенно в крупных приложениях. reactive используется для создания реактивного объекта, в то время как ref создает реактивную ссылку на значение. Основное отличие между ними заключается в том, что ref оборачивает значение в объект с свойством .value, что делает его универсальным для любых типов данных, включая примитивы. reactive, напротив, работает напрямую с объектами и массивами, но не поддерживает примитивы. Реактивность в Vue 3 реализована через Proxy, который отслеживает изменения в данных и автоматически обновляет связанные с ними компоненты.

Практические примеры

Пример 1

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

import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 0
count.value++; // Реактивное обновление

Пример 2

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

import { reactive } from 'vue';
const state = reactive({ name: 'Vue', version: 3 });
console.log(state.name); // 'Vue'
state.version = 4; // Реактивное обновление

Пример 3

Преобразование ref в reactive:

const countRef = ref(0);
const reactiveCount = reactive({ count: countRef.value });
console.log(reactiveCount.count); // 0

Частые ошибки

• Попытка использовать reactive для примитивных значений, что приведет к ошибке или неожиданному поведению.
• Забывают обращаться к значению ref через свойство .value, что вызывает ошибки в шаблонах или логике компонента.

Связанные темы

• Composition API в Vue 3
• Реактивность в Vue.js
• Proxy в JavaScript
• Жизненный цикл компонентов Vue

Follow-up вопросы

В чем основное отличие между reactive и ref?

Уровень: basic

reactive работает только с объектами/массивами и автоматически раскрывает вложенные свойства. ref оборачивает любое значение в объект с .value и используется для примитивов или когда нужна явная ссылка.

Можно ли использовать reactive для примитивных значений? Почему?

Уровень: intermediate

Нет, reactive не работает с примитивами (строками, числами и т.д.), так как требует объекта для отслеживания изменений. Для примитивов используйте ref.

Как работает реактивность под капотом у ref и reactive?

Уровень: advanced

Оба используют Proxy в Vue 3. ref создает прокси для объекта { value: ... }, а reactive — для переданного объекта. При изменениях Vue отслеживает обращения к свойствам и триггерит обновления.

Когда лучше использовать ref вместо reactive?

Уровень: intermediate

ref предпочтительнее: 1) для примитивов 2) когда нужно явно указывать .value 3) при работе с композаблами, которые могут возвращать значения 4) если переменная может быть переприсвоена.

Как преобразовать ref в reactive и наоборот?

Уровень: advanced

ref -> reactive: const state = reactive({ r: myRef }). Обратно: const myRef = toRef(state, 'property'). Также есть toRefs() для деструктуризации reactive объекта в ref-ы.