Vue 3 — derfor kan computed funktioner gøre din kode renere

Vue 3 er den nyeste version af det populære JavaScript-framework til at bygge webapplikationer. En af de funktioner, der får Vue 3 til at skille sig ud, er understøttelsen af computed funktioner (Vue 2 har også dette), som kan hjælpe med at gøre din kode meget renere og mere effektiv.

For at forklare det kort, er computed funktioner i Vue 3 funktioner, der automatisk genberegnes, når en af deres afhængigheder ændres. Det giver dig mulighed for deklarativt at specificere kompleks logik i dine templates, i stedet for manuelt at skulle opdatere værdier eller udføre beregninger i din kode.

Overvej for eksempel en simpel Vue 3-komponent, der viser en liste af elementer og det samlede antal:

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else>
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
      <p>Total count: {{ totalCount }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';

interface Item {
  name: string;
  description: string;
}

export default defineComponent({
  name: 'SomeComponentName',
  setup() {
    const items = ref<Item>([]);

    const isLoading = computed(() => {
      return items.value.length === 0;
    });

    const totalCount = computed(() => {
      return items.value.length;
    });

    const fetchItems = async () => {
      try {
        const res = await axios.get('/api/items');
        items.value = res.data as Item[];
      } catch (e) {
        throw new Error('an error happened' + e);
      }
    };

    fetchItems();
    
    return {
      isLoading,
      totalCount
    };
  }
});
</script>

I dette eksempel er totalCount computed funktionen ansvarlig for at beregne det samlede antal elementer i items-arrayet. isLoading computed funktionen returnerer en boolean-værdi, der angiver, om komponenten er i en loading-tilstand eller ej, baseret på længden af items-arrayet.

Læg mærke til, hvordan vi bruger den computed isLoading til at definere, om applikationen loader. Normalt ser jeg mange udviklere definere en isLoading-variabel og sætte variablen isLoading til true, når de kalder fetchItems, og derefter sætte den til false igen, når API-kaldet er færdigt. At lave en computed funktion til dette gør din kode meget renere.

Ikke kun med ovenstående eksempel, men i mange andre tilfælde kan brugen af computed funktioner hjælpe med at gøre din kode renere på flere måder. For det første giver det dig mulighed for deklarativt at specificere kompleks logik i dine templates, i stedet for manuelt at skulle opdatere værdier eller udføre beregninger i din kode. Det kan gøre dine templates nemmere at læse og forstå, da logikken bag dem er tydeligt adskilt fra præsentationen.

For det andet er computed funktioner mere effektive end manuelt at opdatere værdier eller udføre beregninger i din kode. Vue 3 cacher automatisk computed funktioner, så de kun genberegnes, når deres afhængigheder ændres. Det kan hjælpe med at forbedre din applikations ydeevne, især hvis du har komplekse eller tunge beregninger, der skal udføres ofte.

Endelig kan computed funktioner gøre din kode mere vedligeholdelsesvenlig ved at give en klar adskillelse af ansvar. Ved at indkapsle kompleks logik i computed funktioner kan du gøre det nemmere at ændre eller opdatere den logik uden at påvirke resten af din kode.

Kort sagt er computed funktioner en kraftfuld funktion i Vue 3, der kan hjælpe med at gøre din kode renere, mere effektiv og mere vedligeholdelsesvenlig. Ved at bruge computed funktioner kan du deklarativt specificere kompleks logik i dine templates og drage fordel af Vue 3's automatiske caching for at forbedre din applikations ydeevne.