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

Импорт reactive и ref во Vue.js

Методы reactive и ref импортируются из основного пакета Vue 3 — vue. Эти функции являются частью Composition API, который был представлен в Vue 3 как более гибкая альтернатива Options API для организации логики компонентов.

Синтаксис импорта

В большинстве случаев импорт выглядит следующим образом:

import { reactive, ref } from 'vue';

Этот синтаксис использует именованный импорт (named import), поскольку reactive и ref — это конкретные функции, экспортируемые из основного модуля Vue.

Контекст использования

• В компонентах Vue 3: При использовании Composition API внутри компонента (в секции <script setup> или в функции setup()).
• В standalone-скриптах: Эти функции также можно использовать вне компонентов Vue, например, для создания реактивных объектов в обычных JavaScript-файлах, хотя это менее распространено.

Пример базового использования

<script setup>
import { ref, reactive } from 'vue';

// ref для примитивных значений или ссылок на любые значения
const count = ref(0);
const message = ref('Hello Vue!');

// reactive для объектов (не работает с примитивами)
const user = reactive({
  name: 'John',
  age: 30,
  email: 'john@example.com'
});

// Изменение значений
count.value++; // Для ref обращаемся через .value
user.age = 31; // Для reactive изменяем свойство напрямую
</script>

Ключевые различия между ref и reactive

• ref:

  • Может хранить любое значение (примитивы, объекты, массивы).
  • Возвращает объект с единственным свойством .value, через которое происходит доступ и изменение данных.
  • При использовании в шаблонах Vue автоматически разворачивается (unwrapped), поэтому можно обращаться напрямую к count, а не count.value.

• reactive:

  • Работает только с объектами (включая массивы и коллекции).
  • Возвращает проксированный объект, который отслеживает изменения всех вложенных свойств.
  • Не требует обращения через .value — изменения происходят напрямую через свойства объекта.

Альтернативные способы импорта

Хотя стандартный способ — именованный импорт из 'vue', существуют и другие варианты:

// Импорт всего модуля как объекта (не рекомендуется для production)
import * as Vue from 'vue';
const { reactive, ref } = Vue;

// Импорт через CDN в браузере (глобальный объект Vue)
const { reactive, ref } = Vue;

Важные нюансы

1. Tree-shaking: Именованный импорт позволяет сборщикам (Webpack, Vite) эффективно удалять неиспользуемый код из финальной сборки.
2. Compatibility: Эти функции доступны только в Vue 3. В Vue 2 для реактивности использовалась совершенно другая система на основе Vue.observable().
3. Дополнительные импорты: Часто вместе с reactive и ref импортируются другие функции Composition API:

   import { computed, watch, onMounted } from 'vue';
   

Практический пример с компонентом

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <p>User: {{ user.name }} ({{ user.age }} years)</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const title = ref('Vue 3 Composition API Demo');
const count = ref(0);
const user = reactive({
  name: 'Alice',
  age: 28
});

function increment() {
  count.value++;
  user.age++;
}
</script>

Таким образом, импорт reactive и ref из пакета vue является стандартной практикой при работе с Vue 3 и Composition API, обеспечивая декларативную реактивность для современных веб-приложений.