Vue - watchers + powtórka

Poznajemy watchers, kolejną ważną rzecz w Vue i ogólnie we frameworkach frontendowych. Przypominamy sobie, co już wiemy. Do dzieła.

Oto nasza apka od strony markupu:

<div id="app">
        <p>Random number: {{Math.random()}}</p>
        <p>Counter: {{counter}}</p>
        <p>Fullname: {{fullname}}</p>
        <button v-on:click="increment">+ 1</button>
        <button @click="incrementDelayed">+ 1 delayed</button>
    </div>

Wyjaśnienie:

Div #app to root element, do którego mountujemy apkę
W nawiasach wąsatych Math.random wywołuje inline funkcję JS (przy każdym re-renderze będzie wywoływana)
Obok Counter mamy zmienną z data, którą interpolujemy, zmiana tej zmiennej będzie wywoływać re-render
Poniżej, choć jeszcze tego nie widać, mamy computed property fullna,e, wyliczane na podstawie zależności, jaką jest name w data
Pod spodem mamy dwa różne guziki, do których na kliknięcie są przypisane dwie różne metody z methods

Ok, teraz jak to wygląda w kodzie:

const app = Vue.createApp({
    data() {
      return {
        counter: 0,
        name: "John"
      };
    },
    methods: {
        increment(){
            this.counter++;
        },
        
        incrementDelayed(){
            let that = this;
            
            setTimeout(() => {
                that.counter++;
                that.name = "Jane"
            }, 3000);
        }
    },
    computed: {
        fullname(){
            console.log("I run");
            return this.name + " Doe";
        },
    },

  });
  
app.mount('#app');

Ok, czyli mamy:

data, czyli zmienne, do których możemy się dostać przez „this”
methods, czyli metody – można bindować pod eventy albo wywoływać, metody nieeventowe będą zawsze się odpalać po każdym re-renderze, wytłumaczyliśmy i pokazaliśmy co to znaczy poprzednio
computed properties, czyli używamy ich jako properties (bez wywołania), ale są to metody, które odpalają się i obliczają property tylko wtedy, gdy jakaś zależność się zmieni

Ok, dodamy watchers i obserwujemy co się zmieni, dlatego alert:

const app = Vue.createApp({
    
   //(...)

    watch: {
        name(value){
            alert(value);
        },
        counter(value){
            alert(value, oldValue);
        }
    }

  });
  
app.mount('#app');

Kilka uwag:

Metody można podpinać do eventów albo używać ich w apce
Nie licząc metod wymagających eventu do triggera, każda metoda odpali się przy każdym re-renderze
Re-render jest wymuszony gdy jakaś zmienna z data jest wyświetlana i ulegnie zmianie
Computed properties nie są w ogóle odpalane, jeżeli computed property nie jest wyświetlane (zmiana nie ma znaczenia)
Computed properties (wyświetlane) odpalają się na mount aplikacji, obliczają property i ignorują kolejne re-rendery, chyba że zależność ich property ulegnie zmianie
Watchers mogą być używane jako computed properties, ale wcale nie muszą
Watchers niczego nie zwracają (choć mogą ustawiać swoje property albo wszystko inne, pod this mają)
Watchers przyjmują nową wartość

Vue – watchers + powtórka