Computed a watch - reakce dat na změnu

Často potřebujeme reagovat na změnu dat v proměnné a podle toho provést nějakou akci, případně novou proměnnou vytvořit, nebo data upravit podle nějakého filtru.

Computed - vytvoření agregované proměnné

Pokud vypisujeme například jméno a příjmení, můžeme data buď sestavit přímo v šabloně z více zdrojů, nebo vytvořit novou proměnnou a do té data agregovat.

Běžný přístup:

<div id="app">
    {{ firstName }} {{ lastName }}
</div>

<script>
new Vue({
    el: '#app',
    data: {
        firstName: 'Jan',
        lastName: 'Barášek'
    }
});
</script>

Tento přístup funguje dobře, nicméně někdy můžeme chtít data před výpisem určitým způsobem modifikovat, případně na ně použít filtr nebo dokonce vlastní funkci.

Pokud navíc data skládáme z více zdrojů, může být jejich úprava a formátování na více místech komplikované.

Řešení je proto vytvoření nové proměnné, která ale bude existovat pouze virtuálně a její hodnota se dopočítá na základě funkce až při vykreslení.

<div id="app">
    {{ fullName }}
</div>

<script>
new Vue({
    el: '#app',
    data: {
        firstName: 'Jan',
        lastName: 'Barášek'
    },
    computed: {
        fullName: function(){
            return this.firstName + ' ' + this.lastName;
        }
    }
});
</script>

Výhoda tohoto přístupu je zejména v tom, že můžeme data upravit až v době výpisu a nikdy na to nezapomeneme. Pokud stejná data vypisujeme na více místech různě, stačí připravit více různých funkcí.

Watch - reakce na změnu dat

Metoda watch umožňuje elegantní reakci na změnu dat. Použití je například v případě, kdy chceme reagovat na změnu jména uživatele, počet položek v košíku a podobně.

<div id="app">
    V košíku máte: {{ countItems }}
    <button @click="addItem">Koupit</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            countItems: 1
        },
        methods: {
            addItem: function(){
                this.countItems++;
            }
        },
        watch: {
            countItems: function(){
                alert('V košíku je: ' + this.countItems);
            }
        }
    });
</script>

Kdykoli se změní hodnota proměnné countItems, zavolá se interní funkce na přepočet stavu a můžeme na to reagovat libovolně. Například překreslit komponentu v hlavičce pro výpis počtu kusů.