Реактивность в Vue означает способность платформы отслеживать изменения данных и автоматически обновлять соответствующие части пользовательского интерфейса. Когда данные изменяются, Vue эффективно определяет, какие компоненты необходимо повторно отобразить, гарантируя, что пользовательский интерфейс остается синхронизированным с базовыми данными.
Vue обеспечивает реактивность за счет сочетания механизма получения/установки JavaScript, системы отслеживания зависимостей и виртуального DOM. Синтаксис и подход к включению реактивности в Vue просты и интуитивно понятны. Чтобы сделать свойство данных реактивным, вы определяете его в опции «data» экземпляра Vue или используете функцию «reactive» из Vue Composition API. Vue автоматически преобразует каждое свойство в реактивный метод получения/установки во время процесса инициализации. Вот пример определения реактивных данных в Vue:
Синтаксис : Синтаксис для Vue 2.x:
new Vue({ data: { message: "Hello, Vue!", count: 0, }, });
Синтаксис: Синтаксис для Vue 3.x с Composition API
import { reactive } from 'vue'; const state = reactive({ message: "Hello, Vue!", count: 0, });
Как только свойство данных станет реактивным, вы сможете получить к нему доступ в методах шаблона или компонента, и Vue будет автоматически отслеживать зависимости. Когда во время рендеринга осуществляется доступ к реактивному свойству, Vue знает, что оно должно быть включено в граф зависимостей для этого компонента.
Разберемся с реактивностью Vue на примерах.
Подход 1. В этом подходе мы объявляем переменную счетчика с помощью Vue.ref() и инициализируем ее значением 0. Метод инкрементCounter увеличивает значение счетчика. В разделе HTML мы используем синтаксис шаблона Vue {{ counter }} для отображения текущего значения счетчика и @click для привязки метода IncrectionCounter к событию нажатия кнопки. Наконец, мы монтируем приложение Vue к элементу #app, используя app.mount(‘#app’). Когда вы откроете HTML-файл в браузере, вы увидите компонент «Счетчик» с отображаемым значением счетчика и «Приращением».кнопка. Нажатие кнопки приведет к увеличению счетчика, и обновленное значение отобразится на странице.
Пример. Этот пример иллюстрирует базовую реализацию реактивности vue.
HTML
<
template
>
<
div
>
<
p
>Counter: {{ counter }}</
p
>
<
button
@
click
=
"incrementCounter"
>
Increment
</
button
>
</
div
>
</
template
>
<
script
>
import { ref } from 'vue';
export default {
setup() {
// Declare a reactive variable
const counter = ref(0);
// Define a method to increment the counter
const incrementCounter = () => {
counter.value++;
};
// Return the reactive variables and methods
return {
counter,
incrementCounter,
};
},
};
</
script
>
<
style
scoped>
button {
margin-top: 10px;
}
</
style
>
Выход:
Подход 2. В этом подходе у нас есть поле ввода (<input>), где пользователи могут ввести новый элемент, и кнопка (<button>), чтобы добавить элемент в список. Список отображается в виде неупорядоченного списка (<ul>), а каждый элемент отображается с помощью директивы v-for. Внутри функции данных мы определяем два свойства: newItem и items. NewItem представляет значение, введенное в поле ввода, а items представляет собой массив, в котором хранится список элементов. Метод addItem срабатывает при нажатии кнопки. Он проверяет, является ли newItemне пуст, создает новый объект элемента с уникальным идентификатором и именем из newItem, помещает его в массив элементов, а затем сбрасывает newItem в пустую строку.
Директива v-for в шаблоне перебирает массив элементов и отображает элемент <li> для каждого элемента. Атрибут :key гарантирует, что каждый отображаемый элемент имеет уникальный идентификатор. Всякий раз, когда добавляется новый элемент (this.items.push(…)), Vue обнаруживает изменение и автоматически повторно отображает компонент, обновляя представление для отображения обновленного списка элементов.
Пример. Это еще один пример реактивности представления в Vue.js, где изменения в базовых данных (массиве элементов) автоматически запускают обновления в визуализированном представлении, поддерживая их синхронизацию. Здесь пользователи могут добавлять новые элементы в список, вводя значение в поле ввода и нажимая кнопку.
HTML
<
template
>
<
div
>
<
input
v-model
=
"newItem"
type
=
"text"
placeholder
=
"Enter a new item"
>
<
button
@
click
=
"addItem"
>
Add
</
button
>
<
ul
>
<
li
v-for
=
"item in items"
:key
=
"item.id"
>
{{ item.name }}
</
li
>
</
ul
>
</
div
>
</
template
>
<
script
>
export default {
data() {
return {
newItem: '',
items: []
};
},
methods: {
addItem() {
if (this.newItem !== '') {
this.items.push({
id: Date.now(),
name: this.newItem
});
this.newItem = '';
}
}
}
};
</
script
>
Выход:
Элементы добавляются в список путем ввода значения в поле ввода.