Основы реактивности и работа с данными

reactive

Реактивность в Vue

В Vue 3 есть два основных способа создания реактивных данных:

import { ref, reactive } from 'vue'

// Для примитивов и ссылок
const counter = ref<number>(0)

// Для объектов и массивов
const user = reactive<{
  name: string
  age: number
}>({
  name: 'Александр',
  age: 31
})

ref

Работает с любыми типами
Доступ через .value
Подходит для примитивов

reactive

Только для объектов/массивов
Прямой доступ к свойствам
Для сложных структур

Рекомендуется всегда использовать ref - данные будут доступны всегда через .value

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

Счетчик

<template>
  <div>
    <p>Счетчик: {{ counter }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const counter = ref<number>(0)

const increment = () => {
  counter.value++
}
</script>

Форма пользователя

<template>
  <form @submit.prevent="saveUser">
    <input v-model="user.name" placeholder="Имя">
    <input v-model="user.age" type="number" placeholder="Возраст">
    <button type="submit">Сохранить</button>
  </form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

interface User {
  name: string
  age: number | null
}

const user = reactive<User>({
  name: '',
  age: null
})

const saveUser = () => {
  console.log('Сохранено:', user)
}
</script>

Вычисляемые свойства (computed)

Для производных данных используйте computed

<script setup lang="ts">
import { ref, computed } from 'vue'

const price = ref<number>(100)
const discount = ref<number>(10)

const finalPrice = computed<number>(() => {
  return price.value * (1 - discount.value / 100)
})
</script>

<template>
  <p>Итоговая цена: {{ finalPrice }}</p>
</template>

Работа с массивами

Для реактивных массивов используйте ref

<script setup lang="ts">
import { ref } from 'vue'

interface Todo {
  id: number
  text: string
  done: boolean
}

const todos = ref<Todo[]>([
  { id: 1, text: 'Изучить Vue', done: false }
])

const addTodo = (text: string) => {
  todos.value.push({
    id: Date.now(),
    text,
    done: false
  })
}
</script>