Основные понятия Vue.js: ref() и reactive() 👊

Vue основан на концепции реактивности, как и React и Angular, что улучшает взаимодействие с пользователем.
В Vue есть два метода для объявления реактивного состояния элемента: ref() и Функции reactive().
В этой статье мы рассмотрим разницу между этими двумя функциями и вариантами их использования.
Начнем! 🤙🏼

Что такое ссылка()?

ref() — это функция, которая принимает аргумент, подобный параметру, и возвращает его, завернутый в объект ref со свойством «.value».
Это рекомендуется. способ объявить реактивное состояние.

import { ref } from "vue"

const text = ref("Hello Vue!");

console.log(text) //{ value: "Hello Vue!" }
console.log(text.value) //"Hello Vue!"

Для доступа к значению состояния вы должны использовать свойство .value в шаблоне JavaScript, но если вам необходимо отобразить состояние в шаблоне компонента, свойство .value не является необходимым.

<script setup>
import { ref } from "vue"

const text = ref("Hello Vue!");
</script>

<h1>{{ text }}</h1>

Почему ссылка()?

Чтобы понять полезность метода `ref()`, необходимо знать, как Vue работает под капотом.
Когда он используется в шаблоне и меняет значение ref, Vue немедленно обнаруживает изменение и соответствующим образом обновляет DOM, это это стало возможным благодаря системе реактивности, основанной на отслеживании зависимостей.
В Vanilla JavaScript нет способа отслеживать изменения значений, но можно перехватить их с помощью методов получения и установки, когда объект включен.

Что такое реактивный()?

API reactive() — это еще один способ объявить реактивное состояние и сделать реактивным сам объект.

API reactive() создает прокси-серверы JavaScript, а Vue перехватывает все мутации и доступ ко всем свойствам.

import { reactive } from 'vue';
const state = reactive({ count: 0 });

Ограничения реактивной()

Как было сказано ранее, ref() — это рекомендуемый способ объявления реактивного состояния, поскольку API reactive() имеет некоторые ограничения:

1. Невозможно использовать примитивные значения: работает только с типами объектов.

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

3. Деструктурировать не рекомендуется: так можно потерять отзывчивость.

Заключение

Vue предоставляет два API для реактивного состояния состояния: ref() и reactive() , причем первый вариант рекомендуется, что дополняет некоторые ограничения второго выбора.
Приятного кодирования!✨

Основные понятия Vue.js: ref() и reactive() 👊