Vue Academy · Урок

Функция setup() и реактивные переменные

Точка входа setup(), ref() для примитивов, reactive() для объектов, возврат значений

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

Точка входа setup()

API композиции находится внутри специального параметра компонента, называемого setup(). Он выполняется один раз до создания компонента и служит местом для объявления реактивного состояния и функций.

Все, что Вы return из setup(), становится доступно в шаблоне.

Создание реактивного состояния с помощью ref

ref() оборачивает отдельное значение (число, строку, логическое значение или даже объект) в реактивный контейнер. Само значение хранится в свойстве .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

Создание реактивных объектов с помощью reactive

reactive() принимает обычный объект и возвращает глубоко реактивный прокси-объект. Вы обращаетесь к его свойствам напрямую — свойства .value нет.

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

Передача состояния в шаблон

Все, что возвращается из setup() в виде объекта, становится привязкой шаблона. В этом примере наружу доступны и count, и user.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

Автоматическое извлечение значений в шаблоне

В JavaScript Вы написали count.value. В шаблоне достаточно написать count. Vue автоматически извлекает значения рефов верхнего уровня, поэтому в шаблоне Вам никогда не нужно вводить .value.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

Добавление функций

Функции, определенные в setup(), могут читать и изменять реактивное состояние. Помните: внутри JavaScript для рефов по-прежнему используется .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

Подключение в шаблоне

Верните функцию и привяжите ее к событию. При нажатии кнопки вызывается increment, который изменяет реф, после чего Vue повторно отображает компонент.

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

Ключевое слово this не требуется

Внутри setup() нет this. Вы работаете непосредственно с объявленными переменными. Благодаря этому код проще понимать, а TypeScript удобнее его обрабатывает.

Попытка использовать this в setup() не даст Вам экземпляр компонента.

setup выполняется до создания

setup() выполняется на самом раннем этапе — до created и до полной настройки экземпляра компонента. Поэтому this недоступен, и обратиться к DOM здесь пока нельзя.

Аргументы setup: props и context

setup(props, context) получает обработанные props в качестве первого аргумента и объект context в качестве второго. В context доступны attrs, slots, emit и expose.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

Полный мини-компонент

Здесь собрано всё вместе: реф, реактивный объект, функция и возвращаемые привязки.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

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

Убедитесь, что Вы понимаете назначение setup() и реактивных переменных.

Итоги

Вы изучили основы API композиции:

setup() выполняется один раз до создания компонента и возвращает привязки шаблона.
ref() оборачивает значение — в JS используйте .value.
reactive() оборачивает объект — обращайтесь к его свойствам напрямую.
Шаблоны автоматически извлекают значения из рефов, поэтому .value в них не требуется.
Внутри setup() нет this.

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

Урок «Функция setup() и реактивные переменные» бесплатный?

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

Чему я научусь в уроке «Функция setup() и реактивные переменные»?

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

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

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

Сколько времени занимает урок «Функция setup() и реактивные переменные»?

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

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

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

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

Зачем нужен Composition API
Функция setup() и реактивные переменные
ref и reactive: когда использовать каждый
Computed и Watch в Composition API

← Назад к Vue Academy