Sådan bruges Vue.js Watchers til reaktive data

I Vue.js er overvågere en kraftfuld funktion, der giver dig mulighed for at observere og reagere på ændringer i dine reaktive data. De giver en måde at udføre kode på som svar på dataændringer, hvilket kan være nyttigt til opgaver som datavalidering, API-kald eller udførelse af beregninger, når specifikke dataegenskaber ændres.

Denne artikel vil dække det grundlæggende i brugen af ​​watchers i Vue.js, herunder hvordan man definerer dem, hvordan man bruger dem effektivt og nogle praktiske eksempler.

Hvad er iagttagere?

Watchers er funktioner, der er defineret i watch-objektet i en Vue-komponent. De bruges til at se specifikke dataegenskaber og udføre kode, når disse egenskaber ændres. I modsætning til beregnede egenskaber returnerer overvågere ikke værdier; i stedet bruges de til at udføre bivirkninger eller udløse andre handlinger.

Definition af en iagttager

For at definere en overvåger skal du angive den dataegenskab, du vil overvåge, og angive en funktion, der skal udføres, når den pågældende egenskab ændres. Her er et grundlæggende eksempel:

<template>
  <div>
    <input v-model="message" placeholder="Type something"/>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('Message changed from', oldValue, 'to', newValue);
    }
  }
};
</script>

I dette eksempel bliver dataegenskaben message overvåget. Når meddelelse ændres, logger overvågeren de gamle og nye værdier til konsollen.

Brug af Watchers til API-opkald

Watchers kan være særligt nyttige til at udløse API-kald, når specifikke dataegenskaber ændres. For eksempel vil du måske hente data fra en API, hver gang en søgeterm opdateres.

Her er et eksempel på brug af en overvåger til at hente data fra en API:

<template>
  <div>
    <input v-model="searchTerm" placeholder="Search"/>
    <ul>
      <li v-for="item in results" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      results: []
    };
  },
  watch: {
    searchTerm(newTerm) {
      this.fetchResults(newTerm);
    }
  },
  methods: {
    async fetchResults(term) {
      if (term) {
        const response = await fetch(`https://api.example.com/search?q=${term}`);
        this.results = await response.json();
      } else {
        this.results = [];
      }
    }
  }
};
</script>

I dette eksempel overvåges dataegenskaben searchTerm, og hver gang den ændres, kaldes fetchResults-metoden for at hente søgeresultater fra en API.

Deep Watching

Nogle gange skal du muligvis se indlejrede egenskaber eller objekter. I sådanne tilfælde kan du bruge deep watching ved at indstille deep-indstillingen til true. Dette vil overvåge alle indlejrede egenskaber i objektet for ændringer.

Her er et eksempel på deep watching:

<template>
  <div>
    <input v-model="user.name" placeholder="Enter your name"/>
    <p>User Name: {{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: ''
      }
    };
  },
  watch: {
    user: {
      handler(newValue) {
        console.log('User object changed:', newValue);
      },
      deep: true
    }
  }
};
</script>

I dette eksempel er bruger-objektet dybt overvåget. Enhver ændring af indlejrede egenskaber i bruger-objektet vil udløse overvågeren.

Umiddelbare iagttagere

Nogle gange vil du måske have, at overvågeren kører med det samme, når komponenten er oprettet, ikke kun når dataene ændres. Du kan opnå dette ved at indstille indstillingen umiddelbar til sand.

Her er et eksempel på en øjeblikkelig observatør:

<template>
  <div>
    <input v-model="count" placeholder="Enter a number"/>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count: {
      handler(newCount) {
        console.log('Count changed to:', newCount);
      },
      immediate: true
    }
  }
};
</script>

I dette eksempel er count-overvågningen indstillet til at køre med det samme, når komponenten oprettes, såvel som hver gang count-værdien ændres.

Bedste praksis for brug af Watchers

• Brug watchers til bivirkninger og asynkrone operationer, såsom API-kald.
• Hold iagttagere fokuseret på en enkelt opgave og undgå kompleks logik i dem.
• For simple beregninger baseret på reaktive data kan du overveje at bruge beregnede egenskaber i stedet.
• Brug indstillingerne deep og umiddelbare med omtanke for at undgå unødvendige beregninger og problemer med ydeevnen.
• Test dine iagttagere for at sikre, at de opfører sig som forventet under forskellige scenarier.

Konklusion

Vue.js-watchers er en værdifuld funktion til at reagere på ændringer i reaktive data og udføre bivirkninger. Ved at forstå, hvordan du bruger overvågere effektivt, kan du forbedre interaktiviteten og reaktionsevnen af ​​dine Vue.js-applikationer. Begynd at inkorporere overvågere i dine projekter for at få fuld fordel af Vue.js's reaktive datasystem.