Fullstack Dev

Pochopení reaktivity

Při tvorbě interaktivních aplikací s Vue.js je reaktivita klíčovým konceptem, který umožňuje, aby data plynula hladce mezi logikou aplikace a uživatelským rozhraním. Podívejme se, jak reaktivita ve Vue.js funguje, se zaměřením na dva hlavní nástroje: ref a reactive.

Základy reaktivity ve Vue.js

Abychom pochopili reaktivní systém Vue, začněme jednoduchým příkladem. Předpokládejme, že chceme spravovat hodnotu count, která se dynamicky aktualizuje.

Příklad bez reaktivity

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Tutorial</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <p>Hodnota: {{ count }}</p>
  {{ changeValue() }}
</div>

<script>
  const { createApp } = Vue;

  const app = createApp({
      setup() {
          let count = 0;

          function changeValue() {
              count = 1;
          }

          return {
              changeValue,
              count,
          };
      },
  });

  app.mount('#app');
</script>
</body>
</html>

Když se pokusíte použít proměnnou count ve své Vue aplikaci, zjistíte, že změny hodnoty count se neodrážejí v uživatelském rozhraní.

Proč? Reaktivní systém Vue si nevšímá obyčejných proměnných. Aby byla hodnota count reaktivní, musíme ji obalit pomocí ref.

Použití ref pro reaktivitu

Funkce ref vytváří reaktivní obal pro hodnotu. Aktualizujme náš příklad:

const { createApp, ref } = Vue;

const app = createApp({
  setup() {
      let count = ref(0);

      function changeValue() {
          setTimeout(() => {
              count.value = 1;
          }, 3000);
      }

      return {
          changeValue,
          count,
      };
  },
});

app.mount('#app');

Po přidání ref vidíte, že se hodnota aktualizuje.

Klíčové body o ref

• Reaktivní obal: ref obaluje hodnotu, aby byla reaktivní

• Přístup k hodnotě: Pro přístup nebo úpravu hodnoty ref použijte vlastnost .value

• Dynamické aktualizace: Když se .value změní, uživatelské rozhraní se automaticky aktualizuje, aby odráželo novou hodnotu

Práce s komplexními objekty pomocí ref

Při práci s komplexnějšími strukturami, jako jsou objekty, můžete stále použít ref:

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Tutorial</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <p>Jméno: {{ pet.name }}</p>
  <p>Věk: {{ pet.age }}</p>
  <p>Oblíbené hračky: {{ pet.favoriteToys.join(', ') }}</p>
  <button @click="changeValue">Aktualizovat hračky</button>
</div>

<script>
  const { createApp, ref } = Vue;

  const app = createApp({
      setup() {
          let pet = ref({
              name: 'Sunny',
              age: 2,
              favoriteToys: ['míček', 'frisbee'],
          });

          function changeValue() {
              pet.value.favoriteToys.push('provaz');
          }

          return {
              changeValue,
              pet,
          };
      },
  });

  app.mount('#app');
</script>
</body>
</html>

Při aktualizaci vnořených vlastností objektu zabaleného v ref stále používáte .value k přístupu k reaktivnímu objektu.

Přidal jsem událost kliknutí, abych předešel nekonečným aktualizacím pole. Nyní, když kliknete na tlačítko, přidá se do pole hraček provaz.

Úvod do reactive

reactive je alternativou k ref, určenou k přímému vytváření reaktivních objektů. Na rozdíl od ref není nutné používat .value pro přístup nebo úpravu vlastností.

Příklad s reactive

<!DOCTYPE html>
<html>
  <head>
  <title>Vue.js Tutorial</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
  <p>Jméno: {{ pet.name }}</p>
  <p>Věk: {{ pet.age }}</p>
  <p>Oblíbené hračky: {{ pet.favoriteToys.join(', ') }}</p>
  <button @click="changeValue">Aktualizovat hračky</button>
</div>

  <InArticle/>

<script>
  const { createApp, reactive } = Vue;

  const app = createApp({
      setup() {
          let pet = reactive({
          name: 'Sunny',
          age: 2,
          favoriteToys: ['míček', 'frisbee'],
      });

      function changeValue() {
          pet.favoriteToys.push('provaz');
      }

      return {
          changeValue,
          pet,
      };
  },
  });

  app.mount('#app');
</script>
</body>
</html>

Přidali jsme reactive z Vue, změnili ref na reactive a odstranili .value při přístupu k poli favoriteToys.

Po kliknutí na tlačítko Aktualizovat hračky se pole aktualizuje.

Porovnání ref a reactive

Volba mezi ref a reactive

• Použijte ref: Pro jednotlivé hodnoty nebo když explicitně potřebujete .value (např. kompatibilita s jinými funkcemi Vue)

• Použijte reactive: Pro objekty nebo kolekce, kde chcete jednodušší syntax pro přístup a úpravy vlastností

Video

Nerad čteš, tak mrkni na video 👇

Funkce a Metody: Composition API vs. Options API Porozumění direktivám