Vue Academy · Урок

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

Узнайте, как Vue отслеживает реактивные зависимости

«Основы реактивности» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Что такое реактивность

Реактивность — это автоматическое обновление DOM во Vue при изменении данных.

Вы изменяете значение в JavaScript
Vue обнаруживает изменение
Представление повторно отображается в соответствии с ним

Вручную управлять DOM не требуется.

Как Vue отслеживает зависимости

Vue использует систему отслеживания зависимостей.

Когда отображение считывает реактивное значение, Vue запоминает эту зависимость
Когда это значение позже изменяется, Vue знает, какие отображения нужно запустить повторно
Благодаря этому обновления выполняются точно и эффективно

ref для примитивов

В Composition API функция ref делает одно значение реактивным.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

ref в шаблонах

В шаблонах ссылки ref автоматически разворачиваются, поэтому .value указывать не нужно.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

reactive для объектов

reactive делает реактивным весь объект. Доступ к свойствам осуществляется напрямую, без .value.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref и reactive

Как выбрать между ними:

ref подходит для любого значения — примитива или объекта; доступ выполняется через .value
reactive используется только для объектов; доступ выполняется напрямую

Многие команды предпочитают использовать ref везде для единообразия.

Параметр data (Vue 2 / Options API)

Options API использует функцию data. Каждое возвращаемое свойство становится реактивным.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

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

Прямое присваивание по индексу массива может вызвать сложности, особенно в Vue 2.

В Vue 2 присваивание arr[5] = x не запускало обновления
Прокси Vue 3 обрабатывают большинство таких случаев, но осторожность всё же не помешает

Для ясности и безопасности предпочитайте методы массивов.

Реактивные методы массивов

Методы, изменяющие массив, например push, splice и pop, отслеживаются реактивно.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

Замена и изменение

Есть два способа обновить массивы:

Изменить с помощью push, splice или sort
Заменить, присвоив новый массив, например полученный с помощью filter или map

В Vue 3 оба способа запускают реактивные обновления. Для производных списков замена часто оказывается понятнее.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

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

Деструктуризация реактивного объекта нарушает реактивность соответствующих переменных.

Извлечение свойства копирует его текущее значение
Используйте toRefs, чтобы сохранить реактивность при деструктуризации

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

Быстрая проверка

Проверьте, насколько хорошо Вы поняли реактивность Vue.

Итоги: основы реактивности

Вы изучили принцип работы реактивности Vue:

Vue отслеживает, какие данные использует каждое отображение
ref делает значения реактивными (используйте .value в JS)
reactive делает объекты реактивными (доступ выполняется напрямую)
Options API использует функцию data
Используйте методы массивов и toRefs, чтобы не терять реактивность

Далее: вычисляемые свойства.

Часто задаваемые вопросы

Урок «Основы реактивности» бесплатный?

Да — полный текст урока «Основы реактивности» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Основы реактивности»?

Узнайте, как Vue отслеживает реактивные зависимости Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Основы реактивности»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy