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

Реактивность в 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 обнаруживает изменение и автоматически повторно отображает компонент, обновляя представление для отображения обновленного списка элементов.

Читайте также: Java Networking (сеть)

Пример. Это еще один пример реактивности представления в 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>

Выход:

Элементы добавляются в список путем ввода значения в поле ввода.