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

В этой статье мы рассмотрим основы реактивности в Vue.js и покажем примеры кода, чтобы помочь вам лучше понять эту концепцию

В Vue.js реактивные свойства - это данные, которые могут быть связаны с пользовательским интерфейсом. Когда реактивное свойство изменяется, Vue.js автоматически обновляет соответствующие части пользовательского интерфейса.

Для создания реактивных свойств в Vue.js вы можете использовать объект data Вот пример:

В этом примере мы создаем экземпляр Vue и определяем реактивное свойство message которое содержит строку “Привет, мир!”

Объявление реактивного состояния

В API параметров мы используем параметр data для объявления реактивного состояния компонента. Значением опции должна быть функция, возвращающая объект. Vue вызовет эту функцию при создании нового экземпляра компонента и обернет возвращаемый объект в свою систему реактивности. Любые свойства верхнего уровня этого объекта передаются в экземпляр компонента (this в методах и перехватчиках жизненного цикла):

Эти свойства экземпляра добавляются только при первом создании экземпляра, поэтому вам необходимо убедиться, что все они присутствуют в объекте, возвращаемом функцией data. При необходимости используйте null, undefined или другое значение-заполнитель для свойств, для которых желаемое значение еще недоступно.

Новое свойство можно добавить непосредственно в this, не включая его в data. Однако свойства, добавленные таким образом, не смогут запускать реактивные обновления.
Vue использует префикс $ при предоставлении собственных встроенных API через экземпляр компонента. Он также резервирует префикс _ для внутренних свойств. Вам следует избегать использования имен свойств data верхнего уровня, которые начинаются с любого из этих символов.

Реактивный прокси против оригинального

В Vue 3 данные становятся реактивными за счет использования прокси JavaScript. Пользователи, перешедшие на Vue 2, должны знать о следующем крайнем случае:

Когда вы получаете доступ к this.someObject после его назначения, значение является реактивным прокси исходного newObject. В отличие от Vue 2, исходный newObject остается нетронутым и не станет реактивным: обязательно всегда обращайтесь к реактивному состоянию как к свойству this

Изменение реактивных свойств

Чтобы изменить значение реактивного свойства, вы можете обратиться к нему через экземпляр Vue и присвоить новое значение. Вот пример:

В этом примере мы добавили метод updateMessage, который изменяет значение реактивного свойства message на "Новое сообщение!". Вы можете вызвать этот метод, например, при клике на кнопку.

Объявление методов

Чтобы добавить методы к экземпляру компонента, мы используем опцию methods. Это должен быть объект, содержащий нужные методы:

Vue автоматически связывает значение this для methods, чтобы оно всегда ссылалось на экземпляр компонента. Это гарантирует, что метод сохранит правильное значение this, если он используется в качестве прослушивателя событий или обратного вызова. Вам следует избегать использования стрелочных функций при определении methods, так как это не позволяет Vue привязать соответствующее значение this
Как и все другие свойства экземпляра компонента, methods доступны из шаблона компонента. Внутри шаблона они чаще всего используются в качестве прослушивателей событий
В приведенном выше примере метод increment будет вызываться при нажатии button

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

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

Вот пример обработки клика на кнопке:

Мы добавили кнопку, связали событие клика с методом updateMessage, который изменяет значение реактивного свойства message. Когда пользователь нажимает на кнопку, вызывается метод updateMessage и значение message обновляется.

Глубокая реактивность

В Vue состояние по умолчанию глубоко реактивно. Это означает, что вы можете ожидать, что изменения будут обнаружены даже при изменении вложенных объектов или массивов

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

Вычисляемые свойства - это реактивные свойства, которые вычисляются на основе других реактивных свойств. Они предоставляют более сложные вычисления и автоматически обновляются при изменении исходных данных.

В Vue.js вы можете определить вычисляемые свойства с помощью объекта computed Вот пример:

Мы создаем вычисляемое свойство fullName, которое возвращает полное имя, состоящее из firstName и lastName. Когда firstName или lastName изменяются, fullName автоматически пересчитывается.

После определения вычисляемых свойств, вы можете использовать их в шаблонах Vue.js так же, как и реактивные свойства. Вот пример шаблона:

Мы используем вычисляемое свойство fullName внутри шаблона. Когда firstName или lastName изменяются, соответствующая часть шаблона автоматически обновляется.

Время обновления DOM

Когда вы изменяете реактивное состояние, DOM обновляется автоматически. Однако следует отметить, что обновления DOM не применяются синхронно. Вместо этого Vue буферизует их до тех пор, пока не наступит «следующий тик». в цикле обновления, чтобы гарантировать, что каждый компонент обновляется только один раз, независимо от того, сколько изменений состояния вы внесли.

Чтобы дождаться завершения обновления DOM после изменения состояния, вы можете использовать глобальный API nextTick()

Методы с сохранением состояния

В некоторых случаях нам может потребоваться динамически создать функцию метода, например создать обработчик событий с устранением дребезга
Однако этот подход проблематичен для компонентов, которые используются повторно, поскольку функция с устранением дребезга с сохранением состояния: она сохраняет некоторое внутреннее состояние в течение прошедшего времени. . Если несколько экземпляров компонента используют одну и ту же функцию устранения дребезга, они будут мешать друг другу.
Чтобы функция устранения дребезга каждого экземпляра компонента была независимой от других, мы можем создать версию с устранением дребезга в крючке жизненного цикла created

Заключение

В этой статье мы рассмотрели основы реактивности в Vue.js. Мы узнали, как создавать и использовать реактивные свойства, вычисляемые свойства и обрабатывать реактивные события. Реактивность в Vue.js позволяет создавать динамические и отзывчивые пользовательские интерфейсы, которые автоматически обновляются при изменении данных

Надеюсь, эта статья помогла вам лучше понять основы реактивности в Vue.js. Удачи в ваших проектах с использованием Vue.js

Синтаксис шаблоновТестВычисляемые свойства