Shrnutí

V této lekci jste se naučili, že:

• computed(() => …) vytvoří z jiných hodnot vypočítanou hodnotu: celkovou cenu, vyfiltrovaný nebo seřazený seznam, ano, nebo ne. Funkce hodnotu vrátí a Vue ji přepočítá pokaždé, když se změní ref, který čte.
• V šabloně píšete vypočítanou hodnotu jejím názvem, {{ celkem }}, ve skriptu s .value, i uvnitř jiné vypočítané hodnoty. Bez .value dostanete objekt: v textu [object Object] a porovnání, která nikdy neplatí.
• Do vypočítané hodnoty nejde přiřazovat, změňte to, z čeho se počítá. computed musí být v řádku s import, stejně jako ref a watch.
• Vypočítaná hodnota je lepší než funkce volaná ze šablony: čte se jako hodnota a Vue si ji pamatuje, místo aby ji počítalo znovu při každém vykreslení šablony. sort() přeskládá pole, které řadí, a tak řaďte kopii: [...nabidka].sort(…).
• watch(zdroj, (novaHodnota, staraHodnota) => { … }) něco udělá, když se zdroj, ref nebo vypočítaná hodnota, změní: uloží hodnotu do localStorage, vypíše ji a podobně. Při spuštění aplikace neběží.
• Díky { deep: true } vidí sledování i změny uvnitř pole nebo objektu, třeba push() nebo polozka.pocet++. Bez toho sledování vidí jen nové .value.
• { immediate: true } spustí sledování jednou i při spuštění aplikace. watchEffect() se spustí hned a sleduje každý ref, který čte.
• Vypočítané hodnoty jsou na hodnoty, které stránka ukazuje, sledování na to, co se má udělat.

V další lekci, Miniprojekt: Rozpočet, to všechno využijete ve vlastní aplikaci: v rozpočtu na měsíc, který sčítá, co utratíte, a pamatuje si to.

Nejdřív si ale vše procvičte na recenzi kavárny s omezenou délkou, kterou stránka během psaní odpočítává, a s rozepsaným textem, který po kliknutí na Spustit zůstane.