Kapitel 12: Computed Properties (Berechnete Eigenschaften)

📗 Lernziel: computed() meistern - effiziente berechnete Eigenschaften!

---

12.1 Was sind Computed Properties?

Computed Properties sind reaktive Werte, die auf anderen reaktiven Werten basieren.

Vorteile:

• ✅ Effizient (werden nur neu berechnet, wenn Abhängigkeiten sich ändern)
• ✅ Lesbar (Logik wird gekapselt)
• ✅ Wiederverwendbar

Einfaches Beispiel:

<script setup>:

import { ref, computed } from "vue";

const firstName = ref("Max");
const lastName = ref("Mustermann");

// Computed Property
const fullName = computed(() => {
  return firstName.value + " " + lastName.value;
});

<template>:

<p>Vorname: {{ firstName }}</p>
<p>Nachname: {{ lastName }}</p>
<p><strong>Vollständiger Name: {{ fullName }}</strong></p>

<button @click="firstName = 'Anna'">Name ändern</button>

Wichtig: computed() gibt ein readonly ref zurück!

---

12.2 Getter und Setter (Erweiterte Computed)

Computed mit Setter:

<script setup>:

import { ref, computed } from 'vue'

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

// Computed mit Getter und Setter
const fullName = computed({
  // Getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // Setter
  set(newValue) {
    const names = newValue.split(' ')
    firstName.value = names[0]
    lastName.value = names[names.length - 1]
  }
})
</script>

<template>:

<p>Vorname: <input v-model="firstName" /></p>
<p>Nachname: <input v-model="lastName" /></p>
<p>Vollständiger Name: <input v-model="fullName" /></p>

Anwendungsfall: Formularfelder, die einen berechneten Wert manipulieren sollen.

---

12.3 Computed vs Methods

Unterschied:

Merkmal	computed	methods
Caching	✅ Ja (effizient)	❌ Nein (immer ausgeführt)
Verwendung	Als Eigenschaft ()	Als Funktion ( getDoubledItems)
Einsatzbereich	Abgeleitete Daten	Aktionen/Events

Beispiel:

<script setup>:

import { ref, computed } from "vue";

const items = ref([1, 2, 3, 4, 5]);

// Computed (wird nur neu berechnet, wenn items sich ändert)
const doubledItems = computed(() => {
  console.log("Computed wurde ausgeführt!");
  return items.value.map((item) => item * 2);
});

// Method (wird bei jedem Render ausgeführt)
const getDoubledItems = () => {
  console.log("Methode wurde ausgeführt!");
  return items.value.map((item) => item * 2);
};

<template>:

<!-- Computed (effizienter) -->
<p>{{ doubledItems }}</p>

<!-- Method (weniger effizient) -->
<p>{{ getDoubledItems() }}</p>

<button @click="items.push(6)">Element hinzufügen</button>

Empfehlung:

• Datenberechnung → computed
• Events/Aktionen → methods

---

12.4 Praxis: To-Do Liste Filterung

Aufgabe: To-Do Liste mit Filtern (alle/erledigt/offen).

Lösung:

<script setup>:

import { ref, computed } from "vue";

const newTodo = ref("");
const filter = ref("all"); // 'all', 'done', 'undone'
const todos = ref([
  { id: 1, text: "Lernen", done: false },
  { id: 2, text: "Sport", done: true },
  { id: 3, text: "Einkaufen", done: false },
]);

const addTodo = () => {
  if (newTodo.value.trim() !== "") {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      done: false,
    });
    newTodo.value = "";
  }
};

// Computed Property für Filterung
const filteredTodos = computed(() => {
  if (filter.value === "done") {
    return todos.value.filter((todo) => todo.done);
  } else if (filter.value === "undone") {
    return todos.value.filter((todo) => !todo.done);
  }
  return todos.value;
});

const removeTodo = (id) => {
  todos.value = todos.value.filter((todo) => todo.id !== id);
};

<template>:

<div>
  <h2>To-Do Liste</h2>

  <!-- Eingabe -->
  <input
    v-model="newTodo"
    @keyup.enter="addTodo"
    placeholder="Neue Aufgabe..."
  />
  <button @click="addTodo">Hinzufügen</button>

  <!-- Filter -->
  <div>
    <button @click="filter = 'all'">Alle</button>
    <button @click="filter = 'done'">Erledigt</button>
    <button @click="filter = 'undone'">Offen</button>
  </div>

  <!-- Liste (gefiltert) -->
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done" />
      <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
        {{ todo.text }}
      </span>
      <button @click="removeTodo(todo.id)">Löschen</button>
    </li>
  </ul>

  <!-- Statistik (computed) -->
  <p>Gesamt: {{ todos.length }}</p>
  <p>Erledigt: {{ todos.filter(t => t.done).length }}</p>
  <p>Offen: {{ todos.filter(t => !t.done).length }}</p>
</div>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Was Computed Properties sind
• ✅ Computed mit Getter und Setter
• ✅ Unterschied zwischen computed und methods
• ✅ Praxis: To-Do Liste mit Filterung

🎯 Nächster Schritt: In Kapitel 13 lernst du watch und watchEffect!

---

← Zurück zu Kapitel 11: Weitere DirectiveWeiter zu Kapitel 13: Watch & WatchEffect →