Reaktivität und Funktionen

Vue.jsvuejs

Variablen und Funktionen deklarieren

Variablen und Funktionen können einfach im <script setup> Bereich einer Komponente deklariert werden. Sie sind automatisch im <template> Bereich verfügbar.

<script setup>
const text = 'Welt'

function submit () {
    console.log('submit() wurde ausgefürt')
}
</script>

<template>
  <h1>Hallo {{ text }}</h1>
  
  <button @click="submit">Submit</button>
</template>

Reaktive Variablen mit `ref()`

Damit Vue ein Template reaktiv immer dann neu rendern kann, wenn ein Wert einer Variable ändert, muss die Variable mit Hilfe von ref() in ein reaktives Objekt verpackt werden.

Innerhalb des <script setup> Bereichs kann der Wert über die .value Property verändert werden.

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

// `text` wird dank `ref()` reaktiv.
const text = ref('Welt')

function change () {
    // Sobald der Wert von `text` verändert wird, rendert Vue das Template neu.
    // Ohne ref() würde das Template nach dem Ausführen dieser
    // Funktion immer noch "Welt" als Text anzeigen.
    text.value = 'Mars'
}
</script>

<template>
  <h1>Hallo {{ text }}</h1>
  
  <button @click="change">
      Text ändern
  </button>
</template>

Computed Properties

Computed Properties ermöglichen es, einen Wert abhängig von einer oder mehrerer Variablen zu berechnen.

Vue analysiert, welche Abhängigkeiten eine Computed Property hat und berechnet sie automatisch nur dann neu, wenn eine dieser Abhängigkeiten verändert wird.

Eine Computed Property wird mit der computed() Funktion definiert. Als Argument wird eine Funktion erwartet, die als Rückgabewert den berechneten Wert der Computed Property hat.

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

// `number` ist reaktiv.
const number = ref(1)

// `doubleNumber` gibt dank `computed` immer den
// Wert von `number` x2 zurück.
const doubleNumber = computed(() => number.value * 2)

function increase () {
    // Sobald `number` verändert wird, wird auch `doubleNumber`
    // neu berechnet. Die Änderung ist sofort im Template sichtbar.
    number.value += 1
    // Wie bei `ref()` ist der Wert einer Computed Property über 
    // `.value` zugänglich.
    console.log('doubleNumber ist neu: ', doubleNumber.value)
}
</script>

<template>
  <h1>2x Zahl = {{ doubleNumber }}</h1>
  
  <button @click="increase">
      Zahl erhöhen
  </button>
</template>