Дізнайтеся про Vue.js Watchers, щоб покращити розробку веб-додатків

Автор

Ключові висновки

  • Фреймворки JavaScript, такі як Vue, пропонують такі функції, як архітектура компонентів, керування станом і маршрутизація, щоб спростити розробку веб-додатків.
  • Спостерігачі Vue — це функції, які відстежують зміни реактивних властивостей і дозволяють реагувати на події та модифікацію даних.
  • Порівнюючи спостерігачі з обчисленими властивостями, обчислені властивості більш стислі та легші для читання, що призводить до кращої продуктивності та налагодження.

Фреймворки JavaScript стали важливою частиною веб-розробки. Це пов’язано з їх легкодоступними функціями, включаючи архітектуру компонентів, керування станом і маршрутизацію. Це допомагає зменшити стрес, зусилля та час, необхідні для створення веб-програми з нуля.

Vue, один із цих фреймворків, пропонує багато функцій для прискорення розробки. Функція перегляду дозволяє контролювати значення змінних і виразів під час виконання програми.

Що таке Watchers у Vue?

Спостерігачі Vue — це функції, які відстежують зміни у реактивній властивості та реагують відповідно. Спостерігачі дозволяють реагувати на події та зміну даних.

Щоб використовувати спостерігач, імпортуйте функцію спостерігача з пакета vue у ваш сценарій:

 <script setup>
import { watch } from 'vue';
</script>

Тепер ви можете використовувати функцію спостереження, щоб реалізувати спостерігач у своєму компоненті Vue. Ось простий приклад:

 <template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
  user.value="Victor"; // Change the user's name
};
watch(user, (newUser, oldUser) => {
  alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>

Цей простий компонент використовує функцію спостереження для відстеження зміни імені користувача. Розділ шаблону фрагмента визначає HTML-структуру компонента, яка включає тег ap, який відображає значення змінної реакції користувача.

  6 найкращих хостингів серверів Arma Reforger для плавного ігрового процесу

Шаблон також містить елемент кнопки з функцією changeName, прикріпленою до прослухувача події клацання. Коли змінна користувача змінюється, Vue запускає функцію зворотного виклику. Функція зворотного виклику відображає сповіщення: «Ім’я користувача змінено з «Chinedu» на «Victor».»

Порівняння спостерігачів із обчисленими властивостями

Важливо розуміти різницю між спостерігачами та обчисленими властивостями. Хоча вони обидва використовуються як інструменти реактивності у Vue, ви повинні використовувати їх для різних цілей.

Наприклад, ви можете обчислити суму віку батька та сина за допомогою спостерігачів таким чином:

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>
<script setup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
  total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
  total.value = Number(newAge) + Number(son.value)
})
</script>

Цей компонент Vue використовує спостерігачі, щоб отримати суму віку батька та сина. Для цього створюється нова реактивна змінна total. Ви можете створити реактивну змінну, використовуючи API композиції Vue.

Потім у фрагменті використовуються дві функції спостереження, щоб відстежувати вік сина та батька. Для кожного віку, батька чи сина, фрагмент підсумовує нове значення з віком іншого. Потім він зберігає результат у загальній реактивній змінній.

Розглянемо той самий сценарій у наведеному вище фрагменті, який використовує обчислені властивості:

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>
<script setup>
import { ref , computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
  return Number(father.value) + Number(son.value);
});
</script>

Цей фрагмент, порівняно з попереднім, більш стислий і легший для читання. Фрагмент отримує суму віку батька та сина та зберігає її в обчисленому посиланні (змінна), загальна сума. Потім у розділі шаблону відображається загальна змінна за допомогою інтерполяції, техніки зв’язування даних у Vue.

  Вибираємо чемпіона з редагування відео

Навіть якщо ви можете отримати загальну суму двох віків за допомогою спостерігачів, краще зробити це за допомогою обчислених властивостей. Використання спостерігачів у цій ситуації може призвести до уповільнення часу завантаження та ускладнення налагодження просто тому, що це залучає більше коду.

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

Безпосередній варіант — це конфігурація, яку можна використовувати під час створення спостерігача. Цей параметр визначає, чи слід спостерігачу запускати свій зворотний виклик відразу після того, як Vue змонтує компонент.

Ось приклад компонента, який використовує спостерігач із опцією негайного:

 <script setup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
  count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
  { immediate: true }
);
</script>

У наведеному вище фрагменті спостерігач виконає свій зворотний виклик одразу після ініціалізації компонента та зареєструє на консолі «Кількість змінено з невизначеного на 10». Це показує, що початкова змінна була невизначеною до того, як Vue вставив значення 10 до лічильника ref.

Негайна опція може бути зручною в сценаріях, коли потрібно виконати початкову дію або ініціалізацію на основі поточного значення спостережуваної властивості. Наприклад, коли вам потрібно, щоб ваша програма отримувала дані з API, коли Vue монтує компонент.

  Ні, 5G не викликає коронавірус

Опція Deep, доступна у Vue Watchers

Глибока опція, доступна під час роботи зі спостерігачами у Vue, дозволяє глибоко спостерігати за змінами у вкладених об’єктах або масивах. Якщо встановлено значення true, спостерігач може виявляти зміни у вкладених властивостях.

Ось приклад компонента Vue із параметром deep:

 <script setup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  },
  { deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
</script>

Наведений вище фрагмент ініціалізує посилання даних об’єктом, що містить властивість length. Фрагмент встановлює параметр deep на true. Потім він реєструє на консолі, що дані змінилися, оскільки властивість length змінилася на 43.

Якщо для опції deep встановлено значення true, функція спостереження не помітить жодних змін в об’єкті. Однак Vue відстежує всі вкладені та глибокі зміни без опції deep, коли ви ініціалізуєте змінну даних як реактивний об’єкт:

 <script setup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  }
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
</script>

Функція спостереження у наведеному вище фрагменті реєструватиме на консолі інформацію про зміну даних, оскільки змінна даних є реактивним об’єктом.

Створюйте кращі програми за допомогою Vue Watchers

Спостерігачі Vue можуть допомогти вам досягти дрібної реактивності у ваших програмах. Вони контролюють, як ви можете спостерігати за змінами у властивостях даних і запускати спеціальну логіку у відповідь.

Розуміння того, коли використовувати спостерігачі, їх відмінності від обчислених властивостей і такі параметри, як негайний і глибокий, може значно покращити вашу здатність створювати дуже чуйні додатки Vue.