Простий посібник із обчислених властивостей Vue.js

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

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

Що таке обчислені властивості?

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

Ось базовий приклад компонента Vue з використанням обчисленої властивості:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

У цьому прикладі обчислена властивість fullName поєднує властивості даних firstName і lastName для повернення повного імені. Оскільки fullName є обчисленою властивістю, вона автоматично оновлюватиметься щоразу, коли змінюється firstName або lastName.

Обчислені властивості проти методів

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

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

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

Використання методів отримання та встановлення з обчисленими властивостями

Обчислені властивості також можуть мати гетери та сеттери. За замовчуванням обчислені властивості мають лише геттер, але ви можете додати сеттер для обробки оновлень даних.

Ось приклад обчислюваної властивості з геттером і сетером:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Enter your full name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

У цьому прикладі обчислена властивість fullName має засіб отримання, який повертає повне ім’я, і засіб встановлення, який розділяє введене ім’я та оновлює властивості даних firstName і lastName..

Реактивність у обчислених властивостях

Обчислені властивості є реактивними та автоматично оновлюються, коли їхні залежності змінюються. Наприклад, якщо ви зміните значення firstName або lastName, обчислена властивість fullName автоматично оновиться відповідно до нового значення.

Ось приклад, що демонструє цю реактивність:

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="firstName = 'Jane'">Change First Name to Jane</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

У цьому прикладі, коли натиснуто кнопку, firstName змінюється на "Jane", а обчислена властивість fullName автоматично оновлюється на "Jane Doe".

Найкращі методи використання обчислених властивостей

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

Висновок

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