Vue 3 реактивность: ref vs reactive

1import { ref } from 'vue';
2
3const count = ref(0);
4console.log(count.value); // 0
5count.value++;

1<template>
2  <p>{{ count }}</p>
3  <!-- автоматически распаковывается -->
4</template>
5
6<script setup>
7import { ref } from 'vue';
8const count = ref(0);
9</script>

1const name = ref('Иван'); // примитив
2const user = ref({ name: 'Иван', age: 25 }); // объект
3
4// Доступ к свойствам объекта
5user.value.name = 'Николай'; // реактивно

1import { reactive } from 'vue';
2
3const state = reactive({
4  count: 0,
5  user: { name: 'Иван' },
6});
7
8state.count++; // реактивно
9state.user.name = 'Николай'; // реактивно

1let state = reactive({ count: 0 });
2state = reactive({ count: 1 }); // потеря реактивности!

1const state = reactive({ count: 0, name: 'Иван' });
2
3// Теряется реактивность!
4const { count, name } = state;
5
6// Правильно — через toRefs
7import { toRefs } from 'vue';
8const { count, name } = toRefs(state);

1import { ref, computed } from 'vue';
2
3const firstName = ref('Иван');
4const lastName = ref('Петров');
5
6const fullName = computed(() => `${firstName.value} ${lastName.value}`);

1const fullName = computed({
2  get: () => `${firstName.value} ${lastName.value}`,
3  set: (newValue) => {
4    const [first, last] = newValue.split(' ');
5    firstName.value = first;
6    lastName.value = last;
7  },
8});

1<template>
2  <!-- Computed: кэшируется, пересчитывается только при изменении зависимостей -->
3  <p>{{ fullName }}</p>
4
5  <!-- Метод: выполняется при каждом ре-рендере -->
6  <p>{{ getFullName() }}</p>
7</template>

1import { ref, watch } from 'vue';
2
3const count = ref(0);
4
5watch(count, (newValue, oldValue) => {
6  console.log(`Было: ${oldValue}, Стало: ${newValue}`);
7});

1import { ref, watchEffect } from 'vue';
2
3const count = ref(0);
4
5watchEffect(() => {
6  console.log(`Текущее значение: ${count.value}`);
7  // Автоматически отслеживает зависимости
8});

1const user = ref({ name: 'Иван', age: 25 });
2
3watch(
4  () => user.value.name,
5  (newName) => {
6    console.log(`Имя изменилось на: ${newName}`);
7  }
8);
9
10// Глубокое отслеживание
11watch(user, (newUser) => {
12  console.log('Пользователь изменился:', newUser);
13}, { deep: true });

1import { reactive, readonly } from 'vue';
2
3const state = reactive({ count: 0 });
4const readonlyState = readonly(state);
5
6readonlyState.count++; // Ошибка! Изменение запрещено

1import { shallowRef } from 'vue';
2
3const user = shallowRef({ name: 'Иван' });
4user.value.name = 'Николай'; // не реактивно!
5user.value = { name: 'Николай' }; // реактивно

1const props = defineProps({ name: String });
2const nameRef = toRef(props, 'name');

1const state = reactive({ count: 0, name: 'Иван' });
2const { count, name } = toRefs(state);
3
4// Теперь count и name — реактивные ссылки
5count.value++;