Обчислені, методи та спостерігачі у Vue.js

Вступ

Vue має три способи роботи з реактивними даними: computed, methods та watchers. Кожен з них має своє призначення та характеристики.

Обчислювальні пропси

Computed пропси обчислюються на основі інших реактивних даних та кешуються.

Composition API

javascript

<template>
  <p>Ім'я: {{ firstName }}</p>
  <p>Прізвище: {{ lastName }}</p>
  <p>Повне ім'я: {{ fullName }}</p>
</template>

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})
</script>

Ключові особливості

Кешування

Результат обчислюється лише тоді, коли змінюються залежності:

javascript

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)

const doubleCount = computed(() => {
  console.log('Обчислення...') // Викликається лише при зміні count
  return count.value * 2
})
</script>

<template>
  <p>{{ doubleCount }}</p>
  <p>{{ doubleCount }}</p>
  <p>{{ doubleCount }}</p>
  <!-- console.log викликано лише один раз -->
</template>

Записувані обчислені пропси

javascript

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

// Використання
fullName.value = 'Jane Smith'
// firstName.value = 'Jane'
// lastName.value = 'Smith'
</script>

Методи

Methods — це функції, які виконуються щоразу, коли їх викликають.

javascript

<template>
  <p>{{ getFullName() }}</p>
  <button @click="greet">Привітати</button>
</template>

<script setup>
import { ref } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

function getFullName() {
  console.log('Метод викликано')
  return `${firstName.value} ${lastName.value}`
}

function greet() {
  alert(`Привіт, ${getFullName()}!`)
}
</script>

Ключові особливості

Без кешування

javascript

<template>
  <p>{{ getFullName() }}</p>
  <p>{{ getFullName() }}</p>
  <p>{{ getFullName() }}</p>
  <!-- console.log викликано 3 рази -->
</template>

Приймає аргументи

javascript

<template>
  <p>{{ formatPrice(100) }}</p>
  <p>{{ formatPrice(250, 'USD') }}</p>
</template>

<script setup>
function formatPrice(price, currency = 'USD') {
  return `${price} ${currency}`
}
</script>

Спостерігачі

Watchers — це функції, які реагують на зміни даних і виконують побічні ефекти.

javascript

<template>
  <input v-model="searchQuery" placeholder="Пошук..." />
</template>

<script setup>
import { ref, watch } from 'vue'

const searchQuery = ref('')

watch(searchQuery, (newValue, oldValue) => {
  console.log(`Змінилося з "${oldValue}" на "${newValue}"`)
  // Виконати запит до API
  fetchResults(newValue)
})

function fetchResults(query) {
  // Запит до API
}
</script>

Ключові особливості

Спостереження кількох джерел

javascript

<script setup>
import { ref, watch } from 'vue'

const firstName = ref('')
const lastName = ref('')

watch([firstName, lastName], ([newFirst, newLast]) => {
  console.log(`Повне ім'я: ${newFirst} ${newLast}`)
})
</script>

Негайне виконання

javascript

<script setup>
import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newValue) => {
  console.log('Count змінився:', newValue)
}, { immediate: true })
// Викликано негайно при створенні
</script>

Глибоке спостереження

javascript

<script setup>
import { reactive, watch } from 'vue'

const user = reactive({
  name: 'John',
  address: {
    city: 'New York'
  }
})

watch(user, (newValue) => {
  console.log('Користувач змінився:', newValue)
}, { deep: true })

// Викликається навіть при зміні user.address.city
user.address.city = 'Los Angeles'
</script>

Порівняння

Обчислені пропси vs Методи

Властивість	Обчислені	Методи
Кешування	Так	Ні
Реактивність	Автоматична	Ручна
Аргументи	Ні	Так
Використання в шаблоні	`{{ computed }}`	`{{ method() }}`
Побічні ефекти	Не рекомендується	Дозволено

Коли використовувати обчислені пропси:

Обчислення на основі інших даних
Потрібно кешування
Синхронні операції

Коли використовувати методи:

Обробники подій
Потрібні параметри
Побічні ефекти (запити до API, зміни даних)

Обчислені пропси vs Спостерігачі

Властивість	Обчислені	Спостерігачі
Призначення	Обчислити значення	Побічні ефекти
Результат	Повертає значення	Без повернення
Залежності	Автоматичні	Явні
Асинхронність	Ні	Так

Загальні помилки

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

javascript

<!-- Неефективно -->
<template>
  <p>{{ getFullName() }}</p>
  <p>{{ getFullName() }}</p>
  <!-- Викликано двічі -->
</template>

<!-- Ефективно -->
<template>
  <p>{{ fullName }}</p>
  <p>{{ fullName }}</p>
  <!-- Обчислено один раз -->
</template>

<script setup>
import { computed } from 'vue'

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})
</script>

Побічні ефекти в обчислених властивостях

javascript

<!-- Неправильно -->
<script setup>
import { computed, ref } from 'vue'

const count = ref(0)
const doubled = ref(0)

const bad = computed(() => {
  doubled.value = count.value * 2 // Побічний ефект!
  return count.value * 2
})
</script>

<!-- Правильно - використовуйте спостерігач -->
<script setup>
import { watch, ref } from 'vue'

const count = ref(0)
const doubled = ref(0)

watch(count, (newCount) => {
  doubled.value = newCount * 2
})
</script>

Висновок

Обчислені пропси:

Обчислюють значення на основі інших даних
Автоматичне кешування
Синхронні операції

Методи:

Обробники подій
Функції з параметрами
Побічні ефекти

Спостерігачі:

Реагують на зміни
Асинхронні операції
Побічні ефекти (API, localStorage)

На співбесідах:

Важливо вміти:

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

ВступОбчислювальні пропсиComposition APIКлючові особливостіМетодиКлючові особливостіСпостерігачіКлючові особливостіПорівнянняОбчислені пропси vs МетодиОбчислені пропси vs СпостерігачіЗагальні помилкиВикористання методів замість обчислених властивостейПобічні ефекти в обчислених властивостяхВисновок

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань