Computed Properties - Automatyczne Obliczenia

Witaj w Centrum Obliczeniowym NOVA LAB! Dr. Nova mówi: tak jak nasze komputery automatycznie obliczają trajektorie lotu na Marsa, computed properties automatycznie przeliczają wartości przy zmianach danych wejściowych.

Czym są Computed Properties?

Computed to reaktywne właściwości, które automatycznie się aktualizują gdy ich zależności się zmieniają - jak system nawigacyjny przeliczający kurs przy każdej zmianie parametrów.

1<template>
2  <div class="navigation-panel" style="background: #0a0e27; color: #00ff88;">
3    <p>Prędkość: {{ velocity }} km/s</p>
4    <p>Czas: {{ timeElapsed }} s</p>
5    <p>Dystans: {{ distanceTraveled }} km</p>
6  </div>
7</template>
8
9<script setup>
10import { ref, computed } from 'vue'
11
12const velocity = ref(25)
13const timeElapsed = ref(3600)
14
15// Computed - automatycznie przelicza dystans
16const distanceTraveled = computed(() => {
17  return velocity.value * timeElapsed.value
18})
19</script>

Computed vs Methods

1<template>
2  <div class="fuel-display" style="background: #0a0e27; color: #00ff88;">
3    <!-- Computed - wywoływane bez () -->
4    <p>{{ fuelStatus }}</p>
5
6    <!-- Method - wywoływane z () -->
7    <p>{{ getFuelStatus() }}</p>
8  </div>
9</template>
10
11<script setup>
12import { ref, computed } from 'vue'
13
14const fuelLevel = ref(750)
15const maxFuel = ref(1000)
16
17// Computed - cachowane, przeliczane tylko gdy zależności się zmienią
18const fuelStatus = computed(() => {
19  console.log('Computed wykonane')
20  const percentage = (fuelLevel.value / maxFuel.value) * 100
21  return `Paliwo: ${percentage.toFixed(1)}%`
22})
23
24// Method - wykonywana przy każdym renderze
25function getFuelStatus() {
26  console.log('Method wykonane')
27  const percentage = (fuelLevel.value / maxFuel.value) * 100
28  return `Paliwo: ${percentage.toFixed(1)}%`
29}
30</script>

Cachowanie Computed

1<script setup>
2import { ref, computed } from 'vue'
3
4const sensorReadings = ref([25, 30, 28, 32, 29])
5
6// Kosztowna operacja - ale cachowana!
7const averageTemperature = computed(() => {
8  console.log('Obliczanie średniej temperatury...')
9  return sensorReadings.value.reduce((sum, reading) => {
10    // Symulacja kosztownej operacji
11    return sum + reading
12  }, 0) / sensorReadings.value.length
13})
14
15// Wiele odwołań - tylko jedno obliczenie
16// {{ averageTemperature }}
17// {{ averageTemperature }}
18// {{ averageTemperature }}
19</script>