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

В Vue 3 для управления состоянием компонентов разработчикам предоставлены два основных метода: ref и reactive. Оба метода позволяют реактивно отслеживать изменения, но у каждого из них есть свои особенности и сценарии использования. Давайте разберем их подробнее.

ref

ref используется для создания реактивной переменной, которая может хранить примитивные значения, такие как числа, строки или булевы значения, а также объекты. Глядя на синтаксис, можно заметить, что переменная, созданная с помощью ref, будет обернута в объект с единственным свойством value. Это значит, что для доступа к значению необходимо использовать value.

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

<template>
    <div>
        <p>Текущее значение: {{count}}</p>
        <button
        @click="increment">Увеличить
    </button>
</div>
</template>

<script>
    import {ref} from 'vue';

    export default {
    setup() {
    const count = ref(0); // Создаем реактивную переменную

    const increment = () => {
    count.value++; // Для изменения значения используем .value
};

    return {count, increment};
}
}
</script>

Примечание

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

const numbers = ref([1, 2, 3]);
console.log(numbers.value[0]); // Доступ к первому элементу массива

reactive

reactive предназначен для создания реактивных объектов. Он позволяет создавать реактивный объект, изменяя его свойства напрямую, без необходимости использовать какой-либо специальный синтаксис.

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

<template>
    <div>
        <p>Имя: {{user.name}}</p>
        <button
        @click="changeName">Изменить имя
    </button>
</div>
</template>

<script>
    import {reactive} from 'vue';

    export default {
    setup() {
    const user = reactive({name: 'Алексей'}); // Создаем реактивный объект

    const changeName = () => {
    user.name = 'Дмитрий'; // Меняем имя напрямую
};

    return {user, changeName};
}
}
</script>

Примечание

При использовании reactive, свойства объекта становятся реактивными, и вам не нужно использовать value для доступа к ним. Это делает работу с объектами более удобной, особенно если у вас много свойств.

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

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

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

Пример комбинации

<template>
    <div>
        <p>Имя: {{user.value.name}}</p>
        <button
        @click="changeName">Изменить имя
    </button>
</div>
</template>

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

    export default {
    setup() {
    const user = ref(reactive({name: 'Алексей'})); // Комбинированный подход

    const changeName = () => {
    user.value.name = 'Дмитрий'; // Обращение через user.value
};

    return {user, changeName};
}
}
</script>

Заключение

Теперь вы знаете основные различия между ref и reactive в Vue 3. Правильный выбор между ними позволит более эффективно управлять состоянием вашего приложения. Используйте ref для простых примитивов и reactive для сложных объектов, чтобы ваша работа с Vue 3 была легкой и продуктивной!