Vypočítaná hodnota, nebo funkce?

V lekci Podmínky a seznamy dělala funkce volaná ze šablony to, co v minulém cvičení dělala zobrazenaNabidka. Obojí ukáže stejný seznam, tak proč vypočítaná hodnota? Důvody jsou dva.

První je, že se líp čte. v-for="polozka in zobrazenaNabidka" říká, co seznam je: hodnota jako každá jiná, kterou používáte bez (), v šabloně i v jiných vypočítaných hodnotách.

Druhý důvod není tak vidět. Vue vykreslí šablonu komponenty znovu pokaždé, když se změní kterákoli data, která šablona ukazuje, a pokaždé znovu zavolá i funkce v šabloně, i ty, které se změnou nemají nic společného. Vypočítanou hodnotu si naopak Vue pamatuje a přepočítá ji, jen když se změní něco, co používá. Rozdíl uvidíte, když do funkce dáte console.log():

function serazenaNabidka() {
    console.log("Řadím nabídku");
    return [...nabidka].sort((a, b) => a.cena - b.cena);
}

Aplikace v tomto cvičení ukazuje vedle nabídky i jméno zákazníka. Napište do textového pole jméno: každé písmeno změní jmeno, Vue kvůli jménu na stránce vykreslí šablonu znovu a konzole znovu ukáže Řadím nabídku, i když se nabídka vůbec nezměnila. U šesti položek na tom nesejde, ale u tisíce, nebo u práce, která trvá dlouho, by se stránka při psaní zpomalila.

Funkce řadí kopii [...nabidka] ze stejného důvodu jako v lekci Podmínky a seznamy: sort() přeskládá pole, které řadí, a bez kopie by přeskládalo samotnou nabídku.

Když tedy šablona potřebuje hodnotu vypočítanou z dat, udělejte z ní vypočítanou hodnotu. Funkce si nechte na to, co se má udělat, třeba na obsluhy událostí.