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

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-файл в браузере, вы увидите компонент «Счетчик» с отображаемым значением счетчика и «Приращением».кнопка. Нажатие кнопки приведет к увеличению счетчика, и обновленное значение отобразится на странице.

Читайте также:  Что такое реактивное программирование в Java?

Пример. Этот пример иллюстрирует базовую реализацию реактивности 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>

Выход:

том подходе мы объявляем переменную счетчика с помощью Vu

Подход 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>

Выход:

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

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

Оцените статью
bestprogrammer.ru
Добавить комментарий